CSS propriété background-blend mode
Exemples
Mode mixte:
div {
largeur: 290px;
hauteur: 69px;
background-size: 69px 290px;
background-repeat: no-repeat;
background-image: linear-gradient ( à droite, vert 0%, blanc 100%), url ( 'logo.png');
background-mélange-mode: couleur- dodge;
}
largeur: 290px;
hauteur: 69px;
background-size: 69px 290px;
background-repeat: no-repeat;
background-image: linear-gradient ( à droite, vert 0%, blanc 100%), url ( 'logo.png');
background-mélange-mode: couleur- dodge;
}
Essayez »
Définition et utilisation
attribut background-blend mode définit le mode de la couche de fond (couleur de l'image) de mélange.
| Par défaut: | normal |
|---|---|
| Héritée: | aucun |
| Animable: | pas. Voir animatable |
| Version: | CSS3 |
| Syntaxe JavaScript: | objet .style.backgroundBlendMode = "screen" |
support du navigateur
Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.
| propriété | |||||
|---|---|---|---|---|---|
| background-mélange mode | 35,0 | Ne supporte pas | 30,0 | 7.1 | 22,0 |
Syntaxe CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Valeur de la propriété
| valeur | description | Exemples |
|---|---|---|
| normal | Par défaut. Réglage du mode de fusion normal. | Essayez » |
| multiplier | Mode Multiply. | Essayez » |
| écran | Mode couleur. | Essayez » |
| revêtement | Overlay mode. | Essayez » |
| assombrir | Mode Dimmer. | Essayez » |
| alléger | Mode Illuminez. | Essayez » |
| couleur dodge | Mode couleur Dodge. | Essayez » |
| saturation | en mode de saturation. | Essayez » |
| couleur | Mode couleur. | Essayez » |
| luminosité | Mode Luminosité. | Essayez » |
articles connexes
Tutoriel CSS: CSS background
