Egenskaben background-blend-mode

Egenskaben background-blend-mode angiver blandingsmodus for baggrundsbillede på baggrundsfarve eller andre billeder. I denne egenskab kan man også angive flere værdier adskilt af komma, som vil blive anvendt i samme rækkefølge. Værdierne for egenskaben svarer til de grundlæggende tilstande i grafikredigeringsprogrammer.

Syntaks

cssselektor {
  background-blend-mode: tilstande;
}

Tabellen viser de grundlæggende værdier for egenskaben background-blend-mode:

Værdier

Værdi	Beskrivelse
`normal`	Normal. Der anvendes ikke farveblanding. Standardtilstand.
`multiply`	Multiplikation. I denne tilstand multipliceres værdien af grundfarven med værdien af den kombinerede farve. Den resulterende farve er altid en mørkere farve.
`screen`	Oplysning. I denne tilstand multipliceres de omvendte værdier af grundfarven og den kombinerede farve. Som resulterende farve anvendes altid en lysere farve.
`overlay`	Overlejring. I denne tilstand multipliceres eller oplyses farver afhængigt af grundfarven. Mønstre eller farver overlejrer eksisterende pixels og efterlader lyse og mørke områder af grundfarven uændrede.

Eksempel

Lad os se hvordan billedet vil se ud med standardværdien for egenskaben background-blend-mode:

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Eksempel

Lad os nu ændre værdien for egenskaben background-blend-mode til multiplikation:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Eksempel

Lad os indstille oplysningstilstand for vores billede:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Se også

egenskaben background,
som er en sammentrækningsegenskab for baggrund
egenskaben background-image,
som kan give en blok et baggrundsbillede
egenskaben mix-blend-mode,
som kan overlejre kildafarver på baggrundsbillede
egenskaben backdrop-filter,
som tillader anvendelse af filtre