Práh tvaru-obrazu - Triky CSS

Vlastnost CSS shape-image-thresholdnastavuje, které pixely jsou zahrnuty do tvaru obrázku, když shape-outsidese používá k definování plovoucí oblasti prvku CSS.

Řekněme, že k definování plovoucí oblasti tvaru CSS používáme lineární přechod. Něco takového, kde přecházíme od plné barvy k průhledné v úhlu 45 °:

Normálně bychom to definovali jako background-imageelement. Pokud tento prvek ploveme a umístíme vedle něj nějaký obsah, přechod a obsah budou sedět vedle sebe.

Pokud však vyměníme background-imageza shape-outside, přechod již neuvidíme, ale obsah se zalomí kolem něj, kde jsou pixely v přechodu průhledné.

Ale řekněme, že si myslíme, že text potřebuje obejmout tvar trochu blíž. To je místo, kde můžeme dosáhnout shape-image-threshold. Můžeme jej použít k úpravě místa, kde se obsah přirozeně obepíná kolem průhledných pixelů, včetně pixelů, které jsou poloprůhledné. Například shape-image-thresholdhodnota .3 bude zahrnovat pixely, které jsou v plovoucí oblasti tvaru více než 30% neprůhledné.

Tentokrát zahrneme přechod, abychom zjistili, jak to funguje.

Vidíš to? Deklarováním shape-image-thresholddruhého tvaru a nastavením na hodnotu 0,15 jsme zahrnuli pixely, které jsou v plovoucí oblasti neprůhledné o více než 15%, což umožňuje obsahu překrývat tvar a smidge.

To také funguje, když definujeme vnější tvar pomocí skutečného obrazového souboru, který používá průhlednost. Stejná dohoda, jen jiný tvar pro práci.

Syntax

.logo ( shape-outside: url(/path/to/image.png.webp); shape-image-threshold: .6; )

Platí pro: plováky
Zděděno: ne
Počáteční hodnota: 0,0
Typ animace: číslo

Hodnoty

shape-image-thresholdVlastnost přijímá jedinou hodnotu alfa mezi 0 a 1, kde 0 je ekvivalentní úrovni neprůhlednosti 0% (zcela průhledné) a 1 je ekvivalent k úrovni krytí 100% (bez průhlednosti). Počáteční hodnota je 0,0.