Przykład
Określ tryb mieszania:
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;
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Właściwość background-blend-mode określa tryb mieszania każdej warstwie tła (color and/or image) .
Domyślna wartość: | normal |
---|---|
Dziedziczny: | no |
Animatable: | no. Read about animatable |
Wersja: | CSS3 |
Składnia JavaScript: | object .style.backgroundBlendMode="screen" |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Nieruchomość | |||||
---|---|---|---|---|---|
background-blend-mode | 35,0 | Nieobsługiwany | 30,0 | 7,1 | 22,0 |
Składnia CSS
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
wartości nieruchomości
Wartość | Opis | Graj |
---|---|---|
normal | Jest to ustawienie domyślne. Ustawia tryb mieszania do normy | Graj " |
multiply | Ustawia tryb mieszania pomnożyć | Graj " |
screen | Ustawia tryb mieszania na ekran | Graj " |
overlay | Ustawia tryb mieszania na overlay | Graj " |
darken | Ustawia tryb mieszania ciemnieć | Graj " |
lighten | Ustawia tryb mieszania, aby rozjaśnić | Graj " |
color-dodge | Ustawia tryb mieszania na Color-unik | Graj " |
saturation | Ustawia tryb mieszania do nasycenia | Graj " |
color | Ustawia tryb mieszania pokolorować | Graj " |
luminosity | Określa tryb mieszania dla jasności | Graj " |
Podobne strony
Kurs CSS: CSS Tło