Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
shape-image-threshold
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
* Some parts of this feature may have varying levels of support.
Dieshape-image-thresholdCSS Eigenschaft legt den Alphakanal-Schwellenwert fest, der verwendet wird, um die Form mithilfe eines Bildes als Wert fürshape-outside zu extrahieren.
Probieren Sie es aus
shape-outside: linear-gradient( 50deg, rgb(77 26 103), transparent 80%, transparent);shape-image-threshold: 0.2;shape-outside: linear-gradient( 50deg, rgb(77 26 103), transparent 80%, transparent);shape-image-threshold: 0.4;shape-outside: linear-gradient( 50deg, rgb(77 26 103), transparent 80%, transparent);shape-image-threshold: 0.6;<section> <div> <div></div> We had agreed, my companion and I, that I should call for him at his house, after dinner, not later than eleven o'clock. This athletic young Frenchman belongs to a small set of Parisian sportsmen, who have taken up "ballooning" as a pastime. After having exhausted all the sensations that are to be found in ordinary sports, even those of "automobiling" at a breakneck speed, the members of the "Aéro Club" now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth. </div></section>.example-container { text-align: left; padding: 20px;}#example-element { float: left; width: 150px; height: 150px; margin: 20px; background-image: linear-gradient( 50deg, rgb(77 26 103), transparent 80%, transparent );}Alle Pixel, deren Alphakomponentenwert größer als der Schwellenwert ist, gelten als Teil der Form, um deren Grenzen zu bestimmen. Zum Beispiel bedeutet ein Wert von0.5, dass die Form alle Pixel einschließt, die mehr als 50% opak sind.
Syntax
/* <number> value */shape-image-threshold: 0.7;/* Global values */shape-image-threshold: inherit;shape-image-threshold: initial;shape-image-threshold: revert;shape-image-threshold: revert-layer;shape-image-threshold: unset;Werte
<alpha-value>Legt den Schwellenwert fest, der zum Extrahieren einer Form aus einem Bild verwendet wird. Die Form wird durch die Pixel definiert, deren Alphawert größer als der Schwellenwert ist. Werte außerhalb des Bereichs von 0.0 (vollständig transparent) bis 1.0 (vollständig opak) werden auf diesen Bereich begrenzt.
Formale Definition
| Anfangswert | 0.0 |
|---|---|
| Anwendbar auf | Flusselemente |
| Vererbt | Nein |
| Berechneter Wert | Derselbe wie der angegebene Wert nachdem die<number> auf den Bereich [0.0, 1.0] zugeschnitten wurde. |
| Animationstyp | Nummer |
Formale Syntax
shape-image-threshold =
<opacity-value>
<opacity-value> =
<number>|
<percentage>
Beispiele
Text an einem Verlauf ausrichten
Dieses Beispiel erstellt einen<div> Block mit einem Hintergrundbild aus einem Verlauf. Der Verlauf wird als CSS-Form mithilfe vonshape-outside festgelegt, sodass Pixel innerhalb des Verlaufs, die mindestens 20% opak sind (das heißt, Pixel mit einer Alphakomponente größer als 0.2), als Teil der Form gelten.
HTML
<div></div><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci, libero quae nihil porro debitis laboriosam inventore animi impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni expedita?</p>CSS
#gradient-shape { width: 150px; height: 150px; float: left; background-image: linear-gradient(30deg, black, transparent 80%, transparent); shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2;}Die Form wird hier mithilfe vonbackground-image mit einem linearen Verlauf anstelle einer Bilddatei festgelegt. Der gleiche Verlauf wird auch als das Bild verwendet, aus dem die Form zur Festlegung des Umflussbereichs abgeleitet wird, unter Verwendung dershape-outside Eigenschaft.
Der 20%ige Opazitätsschwellenwert für die Behandlung von Verlaufs-Pixeln als Teil der Form wird dann mithilfe vonshape-image-threshold mit einem Wert von0.2 festgelegt.
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Shapes Module Level 1 # shape-image-threshold-property |