Formas-attēla slieksnis - CSS-triki

CSS shape-image-thresholdrekvizīts nosaka, kuri pikseļi ir iekļauti attēla formā, kad shape-outsidetiek izmantoti CSS elementa pludiņa apgabala noteikšanai.

Pieņemsim, ka mēs izmantojam lineāru gradientu, lai noteiktu CSS formas pludiņa laukumu. Kaut kas līdzīgs šim, kad no vienkrāsainas krāsas kļūst caurspīdīga 45 ° leņķī:

Parasti mēs to definētu kā background-imageelementa elementu. Ja mēs peldam ar šo elementu un nometam kādu saturu blakus tam, gradients un saturs sēdētu blakus.

Bet, ja mēs mainīsim background-imagepret shape-outside, mēs vairs neredzēsim gradientu, bet saturs ap to būs tur, kur gradienta pikseļi ir caurspīdīgi.

Bet pieņemsim, ka mēs domājam, ka tekstam ir jāpieskauj forma nedaudz tuvāk. Tur mēs varam ķerties klāt shape-image-threshold. Mēs to varam izmantot, lai pielāgotu vietas, kur dabiski ietinās caurspīdīgos pikseļus, iekļaujot daļēji caurspīdīgus pikseļus. Piemēram, shape-image-thresholdvērtībā 0,3 tiks iekļauti pikseļi, kas ir vairāk nekā 30% necaurspīdīgi formas pludiņa apgabalā.

Šoreiz iekļausim gradientu, lai redzētu, kā tas darbojas.

Redzi to? Deklarējot shape-image-thresholdotro formu un iestatot to vērtībai .15, pludiņa apgabalā esam iekļāvuši pikseļus, kuru necaurspīdība ir lielāka par 15%, ļaujot saturam pārklāties ar formu.

Tas darbojas arī tad, kad mēs definējam ārējo formu ar faktisko attēla failu, kas izmanto caurspīdīgumu. Tas pats darījums, tikai cita forma, ar kuru strādāt.

Sintakse

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

Attiecas uz: pludiņiem
Mantots: nē
Sākotnējā vērtība: 0,0
Animācijas veids: numurs

Vērtības

shape-image-thresholdProperty akceptē vienu alfa vērtību no 0 līdz 1, kur 0 ir ekvivalents ir dūmainības līmeņa 0% (pilnīgi caurspīdīgs) un 1 ir ekvivalents no necaurredzamības līmenim 100% (nav pārredzamība). Sākotnējā vērtība ir 0,0.