Į background-blend-modenuosavybės apibrėžia, kaip elementas s background-imageturėtų mišinys su PTS background-color:
.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )„CodePen“ peržiūrėkite „CSS-Tricks“ („@ css-tricks“) rašiklio fono mišinio režimą.
Aukščiau pateiktoje demonstracijoje background-imagekairiajame numatytajame nustatyme nėra nustatytas derinimo režimas, todėl vaizdas sutampa background-color. Dešinėje, sumaišymo režimas pakeitė background-imageraudoną background-colorapačią. Tačiau atkreipkite dėmesį, kad ši papildoma savybė neturėjo įtakos teksto spalvai.
Vertybės
initial: numatytoji vertė be maišymo.inherit: paveldi pagrindinio elemento mišinio režimą.: vertė, kuri pakeis fono vaizdą, priklausomai nuo jo fono spalvos.
Vertė gali būti nustatyta kaip bet kuris iš šių (toliau pateiktame demo background-coloryra raudona):
luminosity: išlaikomas viršutinės spalvos ryškumas, naudojant fono spalvos sodrumą ir atspalvį.
Demonstracija
Štai pavyzdys, kaip šios vertės interpretuojamos atsižvelgiant į background-color:
Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) „Pen Pen“ mišinio režimą „CodePen“.
Kelių mišinių režimų grandinė
Kiekvienas fono sluoksnis gali turėti tik vieną mišinio režimą, tačiau, jei, pavyzdžiui, naudojame kelis tiesinius gradientus, kiekvienas iš jų gali turėti savo mišinio režimą, kuris suteikia įdomų vaizdą:
„CodePen“ peržiūrėkite „CSS-Tricks“ (@ css-tricks) rašiklio gradientų ir fono mišinio režimą.
Tai pasiekiama išvardijant šias reikšmes norimo paveikti fono sluoksnio tvarka:
.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; )Pirmasis linijinis gradientas turi screenmišinio režimą, po kurio seka antrasis tiesinis gradientas differenceir pirmasis fono paveikslėlis, kuris jam lightenpritaikytas.
Daugiau informacijos
- CSS „Blend Modes“ pagrindai
- „MDN“ fono mišinio režimas
- Komponavimas ir maišymas W3C
- „background-blend-mode“ tinklalapyje webplatform.org
- CSS mišriojo režimo demonstracinių elementų kolekcija
- Susipažinimas su CSS „Blend“ režimais
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 35+ | 7.1 | 35+ | 27+ | Ne | 37+ | 8.1 ir naujesnės versijos |
