Form-bild-tröskel - CSS-tricks

Anonim

CSS- shape-image-thresholdegenskapen ställer in vilka pixlar som ingår i formen på en bild när de shape-outsideanvänds för att definiera flottörområdet för ett CSS-element.

Låt oss säga att vi använder en linjär lutning för att definiera flottörområdet för en CSS-form. Något liknande här där vi går från en solid färg till transparent i en 45 ° vinkel:

Normalt skulle vi definiera det som background-imageett element. Om vi ​​flyter det här elementet och släpper något innehåll bredvid det, kommer lutningen och innehållet att ligga sida vid sida.

Men om vi byter background-imagemot shape-outsideser vi inte längre lutningen utan innehållet lindas runt det där pixlarna i lutningen är transparenta.

Men låt oss säga att vi tycker att texten måste krama formen lite närmare. Det är där vi kan nå shape-image-threshold. Vi kan använda den för att justera var innehållet naturligt sveper runt de genomskinliga pixlarna genom att inkludera pixlar som är halvtransparenta. Till exempel kommer ett shape-image-thresholdvärde på .3 att innehålla pixlar som är mer än 30% ogenomskinliga i formens flytområde.

Den här gången tar vi med lutningen för att se hur det fungerar.

Se det? Genom att förklara shape-image-thresholdden andra formen och ställa in den till ett värde på 0,15 har vi inkluderat pixlar som är större än 15% ogenomskinliga i flottörområdet, så att innehållet kan överlappa formen som en smidge.

Detta fungerar också när vi definierar den yttre formen med en verklig bildfil som använder transparens. Samma affär, bara en annan form att arbeta med.

Syntax

.logo ( shape-outside: url(/path/to/image.png.webp); shape-image-threshold: .6; )
  • Gäller för: flottör
  • Ärvt: nej
  • Initialt värde: 0,0
  • Animationstyp: nummer

Värden

Den shape-image-thresholdfastighet accepterar ett enda alfavärde mellan 0 och 1, där 0 motsvarar en opacitet nivå av 0% (helt genomskinlig) och en motsvarar en opacitet nivå av 100% (ingen genomskinlighet). Det ursprungliga värdet är 0,0.

Webbläsarstöd

IE Kant Firefox Krom Safari Opera
Nej 79+ 62+ 37+ 10.1+ 24+
Källa: caniuse
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mini
84+ 68+ 81+ 10.3+ Allt

Mer information

  • CSS Shapes Module Level 1 Specification (Editor's Draft)
  • MDN-dokumentation