Kuju-pildi künnis - CSS-trikid | CSS-i almanahh 2025

CSS-i shape-image-thresholdatribuut määrab pildi kuju lisatavad pikslid, kui shape-outsideseda kasutatakse CSS-elemendi ujuki ala määratlemiseks.

Oletame, et CSS-kuju ujuki ala määratlemiseks kasutame lineaarset gradienti. Midagi sellist, kus me läheme ühevärvilisest 45 ° nurga all läbipaistvaks:

Tavaliselt määratleme selle background-imageelemendi elemendina. Kui hõljume seda elementi ja viskame selle kõrvale mõne sisu, istuksid gradient ja sisu kõrvuti.

Kuid kui vahetame background-imageselle vastu shape-outside, ei näe me enam gradienti, vaid sisu ümbritseb seda seal, kus gradiendi pikslid on läbipaistvad.

Oletame, et arvame, et tekst peab kuju veidi lähemale kallistama. Sinna saame jõuda shape-image-threshold. Selle abil saame reguleerida kohti, kus sisu loomulikult ümbritseb läbipaistvaid piksleid, lisades piksleid, mis on poolläbipaistvad. Näiteks shape-image-thresholdväärtus 0,3 sisaldab piksleid, mis on kuju ujuki piirkonnas läbipaistmatud üle 30%.

Seekord lisame gradiendi, et näha, kuidas see töötab.

Näete seda? Deklareerides shape-image-thresholdteise kuju ja seades selle väärtuseks .15, oleme lisanud pikslid, mis on ujuki piirkonnas läbipaistmatumad kui 15%, võimaldades sisul kuju kattuda risti.

See töötab ka siis, kui määratleme väliskuju tegeliku pildifailiga, mis kasutab läbipaistvust. Sama pakkumine, lihtsalt töötamiseks erinev kuju.

Süntaks

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

Kehtib: ujukid
Päritud: ei
Algväärtus: 0,0
Animatsiooni tüüp: number

Väärtused

shape-image-thresholdVara aktsepteerib ühe alfa väärtus vahemikus 0 kuni 1, kus 0 on samaväärne läbipaistmatus tase 0% (täiesti läbipaistev) ja 1 võrdub läbipaistmatus tasemeks 100% (no läbipaistvus). Esialgne väärtus on 0,0.