Alak-kép-küszöb - CSS-trükkök

A CSS shape-image-thresholdtulajdonság beállítja, hogy mely képpontok kerüljenek a kép alakjába, amikor shape-outsidea CSS elem úszó területének meghatározására használják.

Tegyük fel, hogy lineáris gradienssel definiáljuk a CSS-alak úszó területét. Valami ilyesmi, ahol egyszínűből átlátszóvá válunk 45 ° -os szögben:

Normális esetben ezt definiálnánk background-imageegy elem elemének. Ha lebegtetjük ezt az elemet, és néhány tartalmat mellé ejtünk, a színátmenet és a tartalom egymás mellett ül.

De ha felcseréljük, background-imagea shape-outsidetovábbiakban nem látjuk a színátmenetet, de a tartalom köré fonódik, ahol a színátmenet képpontjai átlátszók.

De tegyük fel, hogy szerintünk a szövegnek kicsit közelebb kell ölelnie az alakzatot. Erre nyúlhatunk shape-image-threshold. Használhatjuk a félig átlátszó képpontok beillesztésével annak beállítására, hogy a tartalom hol tekeredik át természetesen az átlátszó képpontokra. Például egy shape-image-threshold0,3 érték magában foglalja azokat a képpontokat, amelyek több mint 30% -ban átlátszatlanok az alak úszó területén.

Ezúttal felvesszük a színátmenetet, hogy lássuk, hogyan működik ez.

Nézd azt? Ha deklaráljuk shape-image-thresholda második alakzatot, és 0,15 értékre állítjuk, 15% -nál átlátszatlanabb pixeleket vettünk fel az úszóterületre, lehetővé téve a tartalomnak, hogy átfedjék az alakot.

Ez akkor is működik, ha a külső alakzatot egy tényleges képfájllal határozzuk meg, amely átlátszóságot használ. Ugyanaz az üzlet, csak más alakzat működik.

Szintaxis

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

A következőkre vonatkozik: úszók
Örökölt: nem
Kezdeti érték: 0,0
Animáció típusa: szám

Értékek

A shape-image-thresholdtulajdonság egyetlen alfa értéket fogad el 0 és 1 között, ahol a 0 egyenértékű a 0% -os (teljesen átlátszó) átlátszatlansági szinttel, az 1 pedig a 100% -os átlátszatlansági szinttel (nincs átlátszóság). A kezdeti érték 0.0.