shape-image-threshold CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Eigenschaft shape-image-threshold legt den Schwellenwert des Alphakanals fest, der verwendet wird, um die Form zu extrahieren, wenn ein Bild als Wert für shape-outside verwendet wird.
Alle Pixel, deren Alphakomponentenwert größer als der Schwellenwert ist, werden zum Zweck der Bestimmung ihrer Begrenzungen als Teil der Form betrachtet. Beispielsweise bedeutet ein Wert von 0.5, dass die Form alle Pixel umschließt, die zu mehr als 50 % deckend sind.
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 class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element"></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
);
}
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 deckend) 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 Farbverlauf ausrichten
Dieses Beispiel erstellt einen <div>-Block mit einem Hintergrundbild aus einem Farbverlauf. Der Farbverlauf wird mithilfe von shape-outside als CSS-Form festgelegt, sodass Pixel innerhalb des Farbverlaufs, die mindestens 20 % deckend sind (also Pixel mit einer Alphakomponente größer als 0.2), als Teil der Form betrachtet werden.
HTML
<div id="gradient-shape"></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 von background-image mit einem linearen Farbverlauf statt mit einer Bilddatei festgelegt. Derselbe Farbverlauf wird auch als Bild verwendet, aus dem die Form abgeleitet wird, um mithilfe der Eigenschaft shape-outside den Float-Bereich festzulegen.
Der Schwellenwert von 20 % Deckkraft, ab dem Farbverlaufspixel als Teil der Form behandelt werden, wird dann mit shape-image-threshold und einem Wert von 0.2 festgelegt.
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Shapes Module Level 1 # shape-image-threshold-property |