Shape-image-prag - CSS-triki | Almanah CSS 2025

Lastnost CSS shape-image-thresholdnastavi, katere slikovne pike so vključene v obliko slike, ko shape-outsidese uporablja za določanje plavajočega območja elementa CSS.

Recimo, da z linearnim gradientom določimo plavajoče območje oblike CSS. Nekaj takega, ko gremo iz enobarvne v prozorno pod kotom 45 °:

Običajno bi to opredelili kot background-imageelement. Če ta element plavamo in mu spustimo nekaj vsebine, se gradient in vsebina postavita drug ob drugem.

Če pa zamenjamo background-imageza shape-outside, ne bomo več videli gradienta, temveč se vsebina ovije okoli njega, kjer so pike v gradientu prozorne.

Recimo pa, da mislimo, da mora besedilo obliko nekoliko bolj približati. Tam lahko dosežemo shape-image-threshold. Z njim lahko prilagodimo, kje se vsebina naravno zavije okoli prosojnih slikovnih pik, tako da vključimo polprozorne slikovne pike. Na primer, shape-image-thresholdbo vrednost .3 vključujejo pik, ki so več kot 30% neprozorna na področju float te oblike.

Tokrat bomo vključili gradient, da bomo videli, kako to deluje.

Poglej to? Z deklaracijo shape-image-thresholddruge oblike in njeno nastavitvijo na vrednost .15 smo v plavajoče območje vključili slikovne pike, ki so več kot 15% neprosojne, kar omogoča vsebini, da prekriva obliko.

To deluje tudi, kadar zunanjo obliko definiramo z dejansko slikovno datoteko, ki uporablja prosojnost. Isti posel, le drugačna oblika za delo.

Sintaksa

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

Velja za: plovec
Podedovano: ne
Začetna vrednost: 0,0
Vrsta animacije: številka

Vrednote

shape-image-thresholdLastnost sprejme en alfa vrednost med 0 in 1, pri čemer je 0 ekvivalent ravni motnost 0% (popolnoma transparentna) in 1 je ekvivalent ravni motnosti 100% (ni preglednosti). Začetna vrednost je 0,0.