Formbildschwelle - CSS-Tricks | CSS-Almanach 2025

Die CSS- shape-image-thresholdEigenschaft legt fest, welche Pixel in der Form eines Bildes enthalten sind, wenn shape-outsideder Gleitbereich eines CSS-Elements definiert wird.

Angenommen, wir verwenden einen linearen Verlauf, um den Gleitbereich einer CSS-Form zu definieren. So etwas, wo wir in einem Winkel von 45 ° von einfarbig zu transparent wechseln:

Normalerweise würden wir das als das background-imageeines Elements definieren. Wenn wir dieses Element schweben lassen und etwas Inhalt daneben ablegen, werden der Verlauf und der Inhalt nebeneinander angezeigt.

Aber wenn wir tauschen background-imagefür shape-outside, werden wir nicht mehr sehen , die Steigung, aber der Inhalt umschlingt es , wo die Pixel in dem Gradienten transparent sind.

Angenommen, der Text muss die Form etwas näher umarmen. Dort können wir erreichen shape-image-threshold. Wir können damit anpassen, wo der Inhalt die transparenten Pixel auf natürliche Weise umschließt, indem wir halbtransparente Pixel einschließen. Ein shape-image-thresholdWert von 0,3 enthält beispielsweise Pixel, die im Gleitbereich der Form zu mehr als 30% undurchsichtig sind.

Dieses Mal werden wir den Farbverlauf einschließen, um zu sehen, wie dies funktioniert.

Siehst du das? Durch Deklarieren shape-image-thresholdder zweiten Form und Festlegen eines Werts von 0,15 haben wir Pixel, die zu mehr als 15% undurchsichtig sind, in den Float-Bereich eingefügt, sodass der Inhalt die Form eines Smidge überlappen kann.

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

Syntax

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

Gilt für: schwimmt
Geerbt: nein
Anfangswert: 0.0
Animationstyp: Nummer

Werte

Die shape-image-thresholdEigenschaft akzeptiert einen einzelnen Alpha-Wert zwischen 0 und 1, wobei 0 einem Opazitätsgrad von 0% (vollständig transparent) und 1 einem Opazitätsgrad von 100% (keine Transparenz) entspricht. Der Anfangswert ist 0.0.