Form-billede-tærskel - CSS-tricks

CSS- shape-image-thresholdegenskaben indstiller, hvilke pixels der er inkluderet i formen på et billede, når shape-outsidedet bruges til at definere et CSS-elements flydeområde.

Lad os sige, at vi bruger en lineær gradient til at definere flydearealet i en CSS-form. Noget som dette, hvor vi går fra en solid farve til gennemsigtig i en 45 ° vinkel:

Normalt vil vi definere det som background-imageet element. Hvis vi flyder dette element og taber noget indhold ved siden af det, vil gradienten og indholdet sidde side om side.

Men hvis vi bytter background-imagetil shape-outside, ser vi ikke længere gradienten, men indholdet vikles rundt om det, hvor pixels i gradienten er gennemsigtige.

Men lad os sige, at vi tror, at teksten skal kramme formen lidt nærmere. Det er her, vi kan nå ud til shape-image-threshold. Vi kan bruge det til at justere, hvor indholdet naturligt ombrydes omkring de gennemsigtige pixels ved at inkludere pixels, der er semi-transparente. For eksempel vil en shape-image-thresholdværdi på .3 omfatte pixels, der er mere end 30% uigennemsigtige i figurens flydeområde.

Denne gang inkluderer vi gradienten for at se, hvordan dette fungerer.

Kan du se det? Ved at erklære shape-image-thresholdden anden form og indstille den til en værdi på 0,15 har vi inkluderet pixels, der er større end 15% uigennemsigtige i flydeområdet, så indholdet kan overlappe formen som en smidge.

Dette fungerer også, når vi definerer den udvendige form med en faktisk billedfil, der bruger gennemsigtighed. Samme aftale, bare en anden form at arbejde med.

Syntaks

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

Gælder for: flyder
Arvet: nej
Startværdi: 0,0
Animationstype: nummer

Værdier

Den shape-image-thresholdejendom accepterer en enkelt a-værdi mellem 0 og 1, hvor 0 svarer til en ugennemsigtig niveau på 0% (helt gennemsigtig) og 1 svarer til en opacitet på 100% (ingen gennemsigtighed). Den oprindelige værdi er 0,0.