CSS background-blend-mode egenskap

Definition och användning

background-blend-mode Attribut definierar varje bakgrundslager (färg och/eller bild) blandningsläge.

Se också:

CSS-tutorial:CSS Bakgrund

Exempel

Specificera bakgrundsbildens blandningsläge som "lighten" (färgför ljusare):

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

Prova själv

Du kan se fler TIY-exempel längre ner på sidan.

CSS-syntax

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

Attributvärde

Värde Beskrivning
normal Standard. Sätt blandningsläget till vanlig.
multiply Sätt blandningsläget till multiply (multiplikation).
screen Sätt blandningsläget till screen (skärm).
overlay Sätt blandningsläget till overlay (överlagra).
darken Sätt blandningsläget till overlay (överlagra).
lighten Sätt blandningsläget till lighten (färgför ljusare).
color-dodge Sätt blandsningsmodellen till color-dodge (färgnedtoning).
saturation Sätt blandsningsmodellen till saturation (tonsättning).
color Sätt blandsningsmodellen till color (färg).
luminosity Sätt blandsningsmodellen till luminosity (ljusstyrka).

Tekniska detaljer

Standardvärde: normal
Arv: Nej
Animering: Stöds inte. Se till:Animeringsrelaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.backgroundBlendMode="screen"

Mer exempel

Exempel

Ange blandsningsmodellen 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;
}

Prova själv

Exempel

Ange blandsningsmodellen 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;
}

Prova själv

Exempel

Ange blandsningsmodellen 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;
}

Prova själv

Exempel

Ange blandsningsmodellen 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;
}

Prova själv

Exempel

Ange blandsningsmodellen 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;
}

Prova själv

Exempel

Ange blandsningsmodellen 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;
}

Prova själv

Exempel

Ange blandsningsmodellen 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;
}

Prova själv

Exempel

Ange blandsningsmodellen 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;
}

Prova själv

Exempel

Ange blandsningsmodellen 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;
}

Prova själv

Webbläsarstöd

Tabellennummern anger markerar den första webbläsare som fullständigt stöder egenskapen.

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