CSS właściwość mix-blend-mode
- Poprzednia strona min-width
- Następna strona @namespace
Definicja i użycie
Atrybut mix-blend-mode określa, jak zawartość elementu powinna się mieszać z tłem bezpośredniego rodzica.
Zobacz również:
CSS Reference Manual:Atrybut background-blend-mode CSS
Przykład
Kontener z czerwonym tłem oraz obrazem wtapiającym się z tym czerwonym kontenerem (ciemny):
.container { background-color: red; } .container img { mix-blend-mode: darken; }
Więcej przykładów TIY można znaleźć na dole strony.
Gramatyka CSS
mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;
Wartość atrybutu
Wartość | Opis |
---|---|
normal | To jest domyślna wartość. Ustaw tryb mieszania na normal. |
multiply | Ustaw tryb mieszania na multiply. |
screen | Ustaw tryb mieszania na screen. |
overlay | Ustaw tryb mieszania na overlay. |
darken | Ustaw tryb mieszania na darken. |
lighten | Ustaw tryb mieszania na lighten. |
color-dodge | Ustaw tryb mieszania na color-dodge. |
color-burn | Ustaw tryb mieszania na color-burn. |
difference | Ustaw tryb mieszania na difference. |
exclusion | Ustaw tryb mieszania na exclusion. |
hue | Ustaw tryb mieszania na hue. |
saturation | Ustaw tryb mieszania na saturation. |
color | Ustaw tryb mieszania na color. |
luminosity | Ustaw tryb mieszania na luminosity. |
Szczegóły techniczne
Domyślna wartość: | normal |
---|---|
Inherencja: | Nie |
Tworzenie animacji: | Nie obsługuje. Zobacz:Atrybuty animacji. |
Gramatyka JavaScript: | object.style.mixBlendMode = "darken" |
Więcej przykładów
Przykład
Pokazanie wszystkich wartości:
.normal {mix-blend-mode: normal;} .multiply {mix-blend-mode: multiply;} .screen {mix-blend-mode: screen;} .overlay {mix-blend-mode: overlay;} .darken {mix-blend-mode: darken;} .lighten {mix-blend-mode: lighten;} .color-dodge {mix-blend-mode: color-dodge;} .color-burn {mix-blend-mode: color-burn;} .difference {mix-blend-mode: difference;} .exclusion {mix-blend-mode: exclusion;} .hue {mix-blend-mode: hue;} .saturation {mix-blend-mode: saturation;} .color {mix-blend-mode: color;} .luminosity {mix-blend-mode: luminosity;}
Przykład
Użyj mix-blend-mode do tworzenia responsywnego tekstu z wycięciem/knockout (tekst wycięty):
.image-container { background-image: url("paris.jpg"); background-size: cover; position: relative; height: 300px; } .text { background-color: white; color: black; font-size: 10vw; font-weight: bold; margin: 0 auto; padding: 10px; width: 50%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; }
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
41.0 | 79.0 | 32.0 | 8.0 | 35.0 |
- Poprzednia strona min-width
- Następna strona @namespace