CSS background-blend-mode property

Definition og brug

background-blend-mode Egenskaben definerer blandingstilen for hver baggrundslag (farve og/eller billede).

Se også:

CSS tutorial:CSS baggrund

Eksempel

Angiv blandingstil for baggrundsbilledet som "lighten" (lysere):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Prøv det selv

Se flere TIY eksempler i bunden af siden.

CSS syntaks

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Attributværdi

Værdi Beskrivelse
normal Standard. Sæt blandingstil til normal.
multiply Sæt blandingstil til multiply (multiplikere).
screen Sæt blandingstil til screen (skærm).
overlay Sæt blandingstil til overlay (overlejre).
darken Sæt blandingstil til overlay (overlejre).
lighten Sæt blandingstil til lighten (lysere).
color-dodge Sæt blandingstil til color-dodge (farveudgydning).
saturation Sæt blandingstil til saturation (mætning).
color Sæt blandingstil til color (farve).
luminosity Sæt blandingstil til luminosity (lysstyrke).

Tekniske detaljer

Standardværdi: normal
Arv: Nej
Animation production: Ikke understøttet. Se venligst:Animation-relaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.backgroundBlendMode="screen"

Flere eksempler

Eksempel

Angiv blandingstil som "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Prøv det selv

Eksempel

Angiv blandingstil som "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Prøv det selv

Eksempel

Angiv blandingstil som "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Prøv det selv

Eksempel

Angiv blandingstil som "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Prøv det selv

Eksempel

Angiv blandingstil som "color-dodge":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Prøv det selv

Eksempel

Angiv blandingstil som "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Prøv det selv

Eksempel

Angiv blandingstil som "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Prøv det selv

Eksempel

Angiv blandingstil som "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Prøv det selv

Eksempel

Angiv blandingstil som "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Prøv det selv

Browser-understøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1