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
.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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.
Syntaxe formelle
<alpha-value>où
<alpha-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
Spécification | Statut | Commentaires |
---|---|---|
CSS Shapes Module Level 1 La définition de 'shape-image-threshold' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Valeur initiale | 0.0 |
---|---|
Applicabilité | flottants |
Héritée | non |
Média | visuel |
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 |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
shape-image-threshold | Chrome Support complet 37 | Edge Aucun support Non | Firefox
Support complet
62
| IE Aucun support Non | Opera Support complet 24 | Safari Support complet 10.1 | WebView Android Support complet 37 | Chrome Android Support complet 37 | Firefox Android
Support complet
62
| Opera Android Support complet 24 | Safari iOS Support complet 10.3 | Samsung Internet Android Support complet 4.0 |
Support for percentage opacity values | Chrome Support complet 78 | Edge Aucun support Non | Firefox Support complet 70 | IE Aucun support Non | Opera Aucun support Non | Safari Aucun support Non | WebView Android Support complet 78 | Chrome Android Support complet 78 | Firefox Android Aucun support Non | Opera Android Aucun support Non | Safari iOS Aucun support Non | Samsung Internet Android Aucun support Non |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.