Proprietatea CSS shape-image-thresholdstabilește ce pixeli sunt incluși în forma unei imagini atunci când shape-outsideeste utilizată pentru a defini zona de plutire a unui element CSS.
Să presupunem că folosim un gradient liniar pentru a defini zona de plutire a unei forme CSS. Ceva de genul acesta în care trecem de la o culoare solidă la transparentă la un unghi de 45 °:
În mod normal, am defini asta ca fiind background-imageun element. Dacă plutim acest element și lăsăm un conținut lângă el, gradientul și conținutul ar sta unul lângă altul.
Dar dacă schimbăm background-imagepentru shape-outside, nu vom mai vedea gradientul, dar conținutul se înfășoară în jurul acestuia în cazul în care pixelii din gradient sunt transparenți.
Să presupunem însă că textul trebuie să îmbrățișeze forma puțin mai aproape. Acolo putem ajunge shape-image-threshold. Îl putem folosi pentru a regla locul în care conținutul se înfășoară în mod natural în jurul pixelilor transparenți, incluzând pixeli care sunt semi-transparenți. De exemplu, o shape-image-thresholdvaloare de .3 va include pixeli care sunt mai mult de 30% opaci în zona de plutire a formei.
De data aceasta, vom include gradientul pentru a vedea cum funcționează acest lucru.
Vezi asta? Prin declararea shape-image-thresholdcelei de-a doua forme și setarea acesteia la o valoare de .15, am inclus pixeli care sunt mai mari de 15% opaci în zona plutitoare, permițând conținutului să se suprapună peste forma unui smidge.
Acest lucru funcționează și atunci când definim forma exterioară cu un fișier de imagine real care utilizează transparență. Aceeași afacere, doar o altă formă cu care să lucrezi.
Sintaxă
.logo ( shape-outside: url(/path/to/image.png.webp); shape-image-threshold: .6; )- Se aplică la: plutitoare
- Moștenit: nu
- Valoare inițială: 0,0
- Tipul de animație: număr
Valori
shape-image-thresholdProprietatea acceptă o valoare alfa unică între 0 și 1, unde 0 este echivalentul unui nivel de opacitate 0% (complet transparent) și 1 este echivalentul unui nivel de opacitate 100% (fără transparență). Valoarea inițială este 0,0.
Suport pentru browser
| IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|
| Nu | Peste 79 de ani | 62+ | 37+ | 10.1+ | 24+ |
| Android Chrome | Android Firefox | Browser Android | Safari iOS | Opera mini |
|---|---|---|---|---|
| 84+ | Peste 68 de ani | Peste 81 de ani | 10.3+ | Toate |
Mai multe informatii
- Specificație CSS Shapes Module Level 1 (Proiectul editorului)
- Documentația MDN