shape-image-threshold

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS shape-image-threshold définit le seuil du canal alpha utilisé pour extraire la forme à partir d'une image en tant que valeur pour shape-outside.

Exemple interactif

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>
    Nous avions convenu, mon compagnon et moi, que je devrais passer le voir
    chez lui, après le dîner, pas plus tard que onze heures. Ce jeune Français
    athlétique appartient à un petit groupe de sportifs parisiens, qui se sont
    adonnés au «&nbsp;ballon&nbsp;» comme passe-temps. Après avoir épuisé toutes
    les sensations que l'on peut trouver dans les sports ordinaires, même celles
    de «&nbsp;l'automobile&nbsp;» à toute vitesse, les membres de «&nbsp;l'Aéro
    Club&nbsp;» recherchent maintenant dans les airs, où ils se livrent à toutes
    sortes d'exploits audacieux, l'excitation nerveuse qu'ils ont cessé de
    trouver sur terre.
  </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
  );
}

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

css

/* Valeurs de type <number> */
shape-image-threshold: 0.7;

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

Valeurs

<alpha-value>: Définit le seuil utilisé pour extraire une forme à partir d'une image. La forme est définie par les pixels dont la valeur du canal alpha est supérieure au seuil. Les valeurs en dehors de l'intervalle 0.0 (totalement transparent) à 1.0 (totalement opaque) sont ramenées 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 définie 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

Aligner le texte sur un dégradé

Cet exemple crée un bloc <div> avec une image d'arrière-plan en dégradé. Le dégradé est établi comme une forme CSS à l'aide de shape-outside, de sorte que les pixels du dégradé qui sont au moins à 20 % opaques (c'est-à-dire ceux dont la composante alpha est supérieure à 0,2) sont considérés comme faisant partie de la forme.

HTML

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

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;
}

La forme est établie ici en utilisant background-image avec un dégradé linéaire plutôt qu'un fichier image. Le même dégradé est également utilisé comme image à partir de laquelle la forme est dérivée pour établir la zone de flottement, en utilisant la propriété shape-outside.

Le seuil d'opacité de 20 % pour considérer les pixels du dégradé comme faisant partie de la forme est ensuite établi en utilisant shape-image-threshold avec une valeur de 0.2.

Résultat

Spécifications

Spécification
CSS Shapes Module Level 1 # shape-image-threshold-property

Compatibilité des navigateurs

Voir aussi

Les formes CSS
Un aperçu des formes CSS
Le type de donnée <basic-shape>
La propriété shape-outside
La propriété shape-margin

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 24 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu