A background-blend-modetulajdonság meghatározza, hogy az elemnek miként background-imagekell keverednie a következőkkel background-color:
.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )Lásd a CSS-Tricks (@ css-tricks) Toll háttér-keverék módját a CodePen-en.
A fenti bemutatóban background-imagea bal oldali alapértelmezettnél nincs beállítva a keverési mód, így a kép átfedi a background-color. A jobb oldalon a keverési mód módosította background-imagea pirosat background-coloralatta. De vegye figyelembe, hogy ez a további tulajdonság nem befolyásolta a szöveg színét.
Értékek
initial: az alapértelmezett érték keverés nélkül.inherit: örökli a szülő elem keverési módját.: olyan érték, amely megváltoztatja a háttérképet a háttérszínétől függően.
Az érték a következők egyikeként állítható be (az alábbi demókban a background-colorpiros látható):
luminosity: a felső szín világossága megmarad, miközben a háttérszín telítettségét és árnyalatát használja.
Demó
Íme egy működő példa arra, hogyan értelmezik ezeket az értékeket a következőktől függően background-color:
Lásd a CSS-Tricks (@ css-tricks) tollal történő keverési módját a CodePen-en.
Többféle keverési mód láncolása
Minden háttérrétegnek csak egyetlen keverési módja lehet, azonban ha például több lineáris színátmenetet használunk, mindegyiknek megvan a saját keverési módja, ami érdekes megjelenítést eredményez:
Tekintse meg a CSS-Tricks (@ css-tricks) Tollszínátmenetek és háttér-keverési módját a CodePen-en.
Ezt úgy érjük el, hogy ezeket az értékeket a kívánt háttérréteg sorrendjében soroljuk fel:
.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )Az első lineáris gradiens screenkeverési móddal rendelkezik, majd a második lineáris gradiens, amely rendelkezik, differenceés az első háttérkép, amely lightenrá vonatkozik.
Több információ
- A CSS Blend Modes alapjai
- background-blend-mode az MDN-en
- Összetétel és keverés a W3C-n
- background-blend-mode a webplatform.org oldalon
- CSS blend módú demók gyűjtése
- A CSS Blend módok megismerése
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 35+ | 7.1 | 35+ | 27+ | Dehogy | 37+ | 8.1+ |
