Właściwość CSSEfekty
background-blend-mode
Miesza ze sobą warstwy tła elementu: obrazy, gradienty i kolor.
- Wartość domyślna
normal- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backgroundBlendMode = "multiply"
Przykład
#CSS
.team-photo {
background: #0ea5e9 url("/img/team.webp") center / cover;
background-blend-mode: luminosity;
}HTML przykładu
<div class="team-photo" style="height: 140px; border-radius: 12px; background: #0ea5e9 url('/collections/covers/programowanie-dla-dzieci.webp') center / cover; background-blend-mode: luminosity;"></div>Podgląd
Definicja i zastosowanie
#Właściwość background-blend-mode działa jak mix-blend-mode, ale tylko w obrębie tła jednego elementu. Miesza ze sobą kolejne warstwy background-image oraz background-color, nie wpływając na treść elementu ani na to, co leży pod nim.
Pozwala zabarwić zdjęcie na kolor marki bez przygotowywania osobnego pliku: wystarczy zdjęcie jako obraz tła, kolor jako background-color i tryb multiply albo luminosity.
Możesz podać kilka trybów po przecinku, po jednym dla każdej warstwy obrazu.
Składnia
#Składnia
background-blend-mode: <tryb mieszania> [, <tryb mieszania>]*;Wartości
#- Zdjęcie zasłania kolor tła.
- Zdjęcie zabarwione na fioletowo i przyciemnione.
- Zdjęcie rozjaśnione kolorem.
- Jasność ze zdjęcia, barwa z koloru tła. Efekt duotonu.
Wartości w praktyce
#normal
Zdjęcie zasłania kolor tła.
.demo { background-blend-mode: normal; }multiply
Zdjęcie zabarwione na fioletowo i przyciemnione.
.demo { background-blend-mode: multiply; }screen
Zdjęcie rozjaśnione kolorem.
.demo { background-blend-mode: screen; }luminosity
Jasność ze zdjęcia, barwa z koloru tła. Efekt duotonu.
.demo { background-blend-mode: luminosity; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Jednolity efekt kolorystyczny na zdjęciach z różnych źródeł uzyskasz przez ten sam kolor tła i tryb
luminosity. - Tryb nie działa, jeśli element nie ma przynajmniej dwóch warstw tła do zmieszania.
Powiązane hasła
#- mix-blend-modeUstala, jak kolory elementu mieszają się z tym, co leży pod nim.
- backgroundSkrót ustawiający wszystkie właściwości tła w jednej deklaracji.
- background-imageUstawia obraz lub gradient jako tło elementu.
- filterNakłada efekty graficzne na element: rozmycie, jasność, kontrast, skalę szarości i inne.
Widzisz błąd albo brakuje przykładu? Napisz do nas.