Prah-tvar-obraz - Triky CSS | Almanach CSS 2025

Vlastnosť CSS shape-image-thresholdnastavuje, ktoré pixely sa zahrnú do tvaru obrázka, keď shape-outsidesa použijú na definovanie plávajúcej oblasti prvku CSS.

Povedzme, že na definovanie plávajúcej oblasti tvaru CSS používame lineárny gradient. Niečo také, kde prechádzame od jednofarebnej k priehľadnej v uhle 45 °:

Normálne by sme to definovali ako background-imageelement. Keby sme tento prvok vyplávali a umiestnili vedľa neho nejaký obsah, gradient a obsah by sedeli vedľa seba.

Ak však zameníme položku background-imageza shape-outside, prechod už neuvidíme, ale obsah sa omotá okolo neho, kde sú pixely v prechode priehľadné.

Povedzme však, že si myslíme, že text musí tvar trochu priblížiť. Tam môžeme siahnuť shape-image-threshold. Môžeme ho použiť na úpravu miesta, kde sa obsah prirodzene obopína okolo priehľadných pixelov, a to tak, že do neho zahrnieme aj polopriehľadné pixely. Napríklad shape-image-thresholdhodnota .3 bude obsahovať pixely, ktoré sú vo floatovej oblasti tvaru viac ako 30% nepriehľadné.

Tentokrát zahrnieme gradient, aby sme videli, ako to funguje.

Vidíte to? Deklarovaním shape-image-thresholddruhého tvaru a nastavením na hodnotu 0,15 sme zahrnuli pixely, ktoré sú v plavenej oblasti nepriehľadné o viac ako 15%, čo umožňuje, aby sa obsah prekrýval s tvarom.

Funguje to aj vtedy, keď definujeme vonkajší tvar pomocou skutočného obrazového súboru, ktorý využíva priehľadnosť. Rovnaká dohoda, len iný tvar na prácu.

Syntax

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

Platí pre: plaváky
Zdedené: č
Počiatočná hodnota: 0,0
Typ animácie: číslo

Hodnoty

shape-image-thresholdVlastnosť prijíma jedinú hodnotu alfa medzi 0 a 1, kde 0 je ekvivalentná úrovni nepriehľadnosti 0% (úplne priehľadné) a 1 je ekvivalent k úrovni krytia 100% (bez transparentnosti). Počiatočná hodnota je 0,0.