Shape-image-threshold

Die CSS-Eigenschaft shape-image-threshold legt fest, welche Pixel in die Form eines Bildes einbezogen werden, wenn shape-outside verwendet wird, um den Float-Bereich eines CSS-Elements zu definieren.

Nehmen wir an, wir verwenden einen linearen Farbverlauf, um den Float-Bereich einer CSS-Form zu definieren. Etwas wie hier, wo wir von einer Vollfarbe zu transparent in einem Winkel von 45° übergehen.

Normalerweise würden wir das als background-image eines Elements definieren. Wenn wir dieses Element floaten und etwas Inhalt daneben platzieren, würden der Farbverlauf und der Inhalt nebeneinander liegen.

Aber wenn wir background-image durch shape-outside ersetzen, sehen wir den Farbverlauf nicht mehr, sondern der Inhalt wickelt sich um ihn herum, wo die Pixel im Farbverlauf transparent sind.

Aber nehmen wir an, wir denken, der Text muss die Form ein wenig enger umschließen. Dort können wir shape-image-threshold verwenden. Wir können es verwenden, um anzupassen, wo sich der Inhalt auf natürliche Weise um die transparenten Pixel wickelt, indem wir Pixel einbeziehen, die halbtransparent sind. Zum Beispiel wird ein shape-image-threshold-Wert von .3 Pixel einbeziehen, die mehr als 30% opak sind, in den Float-Bereich der Form.

Dieses Mal werden wir den Farbverlauf einbeziehen, um zu sehen, wie das funktioniert.

Siehst du das? Indem wir shape-image-threshold auf der zweiten Form deklarieren und es auf einen Wert von .15 setzen, haben wir Pixel einbezogen, die zu mehr als 15% opak sind, im Float-Bereich, wodurch der Inhalt die Form ein wenig überlappen kann.

Dies funktioniert auch, wenn wir die äußere Form mit einer tatsächlichen Bilddatei definieren, die Transparenz verwendet. Gleiche Sache, nur eine andere Form zum Arbeiten.

Syntax

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

Gilt für: floats
Vererbt: nein
Anfangswert 0.0
Animationstyp: number

Werte

Die Eigenschaft shape-image-threshold akzeptiert einen einzelnen Alpha-Wert zwischen 0 und 1, wobei 0 dem Äquivalent einer Opazität von 0% (vollständig transparent) und 1 dem Äquivalent einer Opazität von 100% (keine Transparenz) entspricht. Der Anfangswert ist 0.0.