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 January 2020.
La propriété shape-image-threshold
définit le seuil, en terme de canal alpha, à utiliser pour extraire la forme d'une image. Cette forme pourra être utilisée pour shape-outside
.
Exemple interactif
Touts les pixels dont la composante alpha est supérieure à ce seuil seront retenus pour délimiter les contours de la formes. Une valeur de 0.5 indiquera par exemple qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50%.
Syntaxe
/* Quantité seuil */
/* Valeur <number> */
shape-image-threshold: 0.7;
/* Valeurs globales */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: unset;
Valeurs
<number>
-
Un nombre (
<number>
) représentant le seuil utilisé pour extraire une forme d'une image. La forme est définie par les pixels dont la valeur du canal alpha est supérieur au seuil indiqué. Un seuil qui est inférieur à 0.0 (transparence totale) ou supérieur à 1.0 (opacité totale) sera ramené dans cet intervalle.
Définition formelle
Valeur initiale | 0.0 |
---|---|
Applicabilité | flottants |
Héritée | non |
Valeur calculée | La même que la valeur spécifiée après avoir écrêté number dans l'intervalle [0.0, 1.0]. |
Type d'animation | un nombre |
Syntaxe formelle
shape-image-threshold =
<opacity-value>
<opacity-value> =
<number> |
<percentage>
Exemples
Dans cet exemple, on utilise un bloc <div>
pour y afficher une image d'arrière-plan avec un dégradé. On retrouve ce dégradé dans une forme CSS avec la propriété shape-outside
et on utilise shape-image-threshold
afin de ne retenir que les pixels dont l'opacité est supérieure ou égale à 20% pour délimiter la forme.
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;
}
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>
Résultat
Spécifications
Specification |
---|
CSS Shapes Module Level 1 # shape-image-threshold-property |
Compatibilité des navigateurs
BCD tables only load in the browser