Exemplu
Specificarea unui mod de amestecare:
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;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea background-amestec-mode definește modul de amestecare a fiecărui strat de fundal (color and/or image) .
Valoare implicită: | normal |
---|---|
Mostenit: | no |
Animatable: | no. Read about animatable |
Versiune: | CSS3 |
sintaxa JavaScript: | object .style.backgroundBlendMode="screen" |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Proprietate | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | Nu sunt acceptate | 30.0 | 7.1 | 22.0 |
CSS Sintaxa
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Valori de proprietate
Valoare | Descriere | Joaca-l |
---|---|---|
normal | Acest lucru este implicit. Setează modul de amestecare la normal | Joaca - l » |
multiply | Setează modul de amestecare pentru a se multiplica | Joaca - l » |
screen | Setează modul de amestecare pentru ecran | Joaca - l » |
overlay | Setează modul de amestecare la overlay | Joaca - l » |
darken | Setează modul de amestecare pentru a întuneca | Joaca - l » |
lighten | Setează modul de amestecare pentru a ușura | Joaca - l » |
color-dodge | Setează modul de amestecare a culorilor Dodge | Joaca - l » |
saturation | Setează modul de amestecare la saturație | Joaca - l » |
color | Setează modul de amestecare pentru a colora | Joaca - l » |
luminosity | Setează modul de amestecare la luminozitate | Joaca - l » |
Pagini similare
Tutorial CSS: CSS Context