Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété isolation

Description de la propriété isolation.

Définit comment un élément doit interagir avec son parent, du point de vue des couleurs. isolation est utile lorsque des modes de mélange ont été définis (voir les propriétés mix-blend-mode et background-blend-mode.

Valeurs pour isolation.

  • isolation: auto;

    Valeur par défaut. Le navigateur décide s'il est nécessaire de créer un niveau d'isolation ou pas.

  • isolation: isolate;

    Un niveau d'isolation est créé.

  • isolation: initial;

    La valeur initiale est auto.

  • isolation: unset; isolation: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Voici comment est construite cette démonstration pour la propriété isolation : une image (le ballon) est dans un div transparent, qui est lui même dans un autre div avec un fond graphique (la texture aux oiseaux).

L'image est "mélangée" avec l'arrière-plan par sa propriété mix-blend-mode. On voit bien en effet que le motif aux oiseaux interagit avec le ballon.

Le simulateur applique la propriété isolation au div transparent. Observez que cet élément peut isoler l'image de l'arrière-plan et empêcher ainsi leur interaction.

Fonctionnement de la propriété isolation en CSS

 

isolation :
Exemple pour la propriété CSS isolation

Voir aussi...

Arrière-plan - Propriétés.

Arrière-plan - Fonctions.