Baggrundsblanding-tilstand - CSS-tricks

Anonim

De background-blend-modeejendom definerer, hvordan et element background-imagebør blande med sin background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Se Pen baggrundsblandingstilstand af CSS-Tricks (@ css-tricks) på CodePen.

I demoen ovenfor er standard background-imagetil venstre ikke indstillet til blandingstilstand, så billedet overlapper background-color. Til højre har blandingstilstanden dog ændret den background-imagemed den røde background-colornedenunder. Men bemærk, at tekstfarven ikke er blevet påvirket af denne ekstra egenskab.

Værdier

  • initial: standardværdien uden blanding.
  • inherit: arver det overordnede elements blandingstilstand.
  • : en værdi, der ændrer baggrundsbilledet afhængigt af dets baggrundsfarve.

Den værdi kan indstilles som helst af følgende (i demoer under background-colorrødt):

luminosity: lysstyrken på den øverste farve bevares under anvendelse af baggrundsfarvens mætning og nuance.

Demo

Her er et fungerende eksempel på, hvordan disse værdier fortolkes afhængigt af background-color:

Se tilstanden Pen baggrundsblanding af CSS-Tricks (@ css-tricks) på CodePen.

Kæde flere blandingstilstande

Hvert baggrundslag kan kun have en enkelt blandingstilstand, men hvis vi f.eks. Bruger flere lineære gradienter, kan hver af dem have deres egen blandingstilstand, hvilket giver en interessant skærm:

Se pennefarver og baggrundsblandingstilstand af CSS-Tricks (@ css-tricks) på CodePen.

Dette opnås ved at liste disse værdier i rækkefølge efter baggrundslaget, som du gerne vil påvirke:

.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; )

Den første lineære gradient har screenblandingstilstand, efterfulgt af den anden lineære gradient, der har, differenceog det første baggrundsbillede, der er lightenanvendt på den.

Mere information

  • Grundlæggende om CSS-blandetilstande
  • baggrundsblandingstilstand på MDN
  • Komposit og blanding på W3C
  • baggrundsblandingstilstand på webplatform.org
  • Samling af demos i CSS-blandetilstand
  • Lær at kende CSS-blandetilstande

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
35+ 7.1 35+ 27+ Nix 37+ 8.1+