Formos-vaizdo slenkstis - CSS-gudrybės

CSS shape-image-thresholdypatybė nustato, kurie pikseliai yra įtraukiami į vaizdo formą, kai shape-outsidejie naudojami apibrėžiant CSS elemento plūduriuojančią sritį.

Tarkime, kad mes naudojame tiesinį gradientą apibrėždami CSS formos plūduriuojantį plotą. Kažkas panašaus į tai, kai pereiname nuo vienspalvės iki skaidrios 45 ° kampu:

Paprastai tai apibrėžtume kaip background-imageelemento elementą. Jei plukdysime šį elementą ir šalia jo numestume dalį turinio, gradientas ir turinys sėdėtų vienas šalia kito.

Bet jei mes apsikeitimo background-imageir shape-outsidemes nebematysite gradientą, tačiau turinys antklodės aplink jį kur į gradiento pikselių yra skaidri.

Bet tarkime, kad mes manome, kad tekstas turi šiek tiek priglausti figūrą. Štai kur mes galime pasiekti shape-image-threshold. Mes galime jį naudoti norėdami koreguoti, kur turinys natūraliai apgaubia skaidrius taškus, įtraukdami pusiau permatomus taškus. Pvz., Į shape-image-threshold0,3 vertę bus įtraukti pikseliai, kurių formos plūduriuojančiame plote yra daugiau kaip 30% nepermatoma.

Šį kartą įtrauksime gradientą, kad pamatytume, kaip tai veikia.

Matyti tai? Deklaruodami shape-image-thresholdantrąją figūrą ir nustatydami ją į vertę 0,15, plūduriuojančiame plote įtraukėme pikselius, kurie yra daugiau kaip 15% nepermatomi, o tai leidžia turiniui sutapti su forma.

Tai taip pat veikia, kai išorinę formą apibrėžiame faktiniu vaizdo failu, kuriame naudojamas skaidrumas. Tas pats sandoris, tik kitos formos darbas.

Sintaksė

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

Taikoma: plūdėms
Paveldima: ne
Pradinė vertė: 0,0
Animacijos tipas: numeris

Vertybės

shape-image-thresholdNuosavybė priima vieną alfa vertę tarp 0 ir 1, kur 0 yra ekvivalentą neskaidrumo lygio 0% (visiškai skaidrus) ir 1 yra ekvivalentą neskaidrumo lygio 100% (ne skaidrumo). Pradinė vertė yra 0,0.