shape-image-threshold

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. Une valeur de 0.5 indiquera qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50% .

/* Quantité seuil  */
/* Valeur <number> */
shape-image-threshold: 0.7;

/* Valeurs globales */
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: unset;

Valeur initiale0.0
Applicabilitéflottants
Héritéenon
Médiavisuel
Valeur calculéeLa même que la valeur spécifiée après avoir écrêté number dans l'intervalle [0.0, 1.0].
Type d'animationun nombre
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

<number>
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

<number>

Exemples

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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui) Pas de support Pas de support Pas de support 7.0 -webkit
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple (Oui) Pas de support Pas de support Pas de support ?

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,