Exemple
Spécifiez un mode de fusion:
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
} Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété background-mélange mode définit le mode de fusion de chaque couche de fond (color and/or image) .
| Valeur par défaut: | normal |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.backgroundBlendMode="screen" |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35,0 | Non supporté | 30,0 | 7.1 | 22,0 |
Syntaxe CSS
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| normal | Ceci est par défaut. Définit le mode de fusion à la normale | Joue-le " |
| multiply | Définit le mode de fusion à multiplier | Joue-le " |
| screen | Définit le mode de fusion à l'écran | Joue-le " |
| overlay | Définit le mode de fusion pour recouvrir | Joue-le " |
| darken | Définit le mode de fusion pour assombrir | Joue-le " |
| lighten | Définit le mode de fusion pour alléger | Joue-le " |
| color-dodge | Définit le mode de fusion couleur dodge | Joue-le " |
| saturation | Définit le mode de fusion à saturation | Joue-le " |
| color | Définit le mode de fusion à la couleur | Joue-le " |
| luminosity | Définit le mode de fusion à la luminosité | Joue-le " |
Pages associées
Tutoriel CSS: CSS Contexte