CSS background-blend-mode Attribute

Definition and Usage

background-blend-mode Ang attribute ay nagtatalaga ng mixed mode para sa bawat layer ng background (kulay at/o larawan).

Mga iba pang pagkakatuturo:

CSS Tutorial:CSS 背景

Halimbawa

Tukuyin ang mixed mode ng background image bilang "lighten" (paglaganap):

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

Subukan ito nang personal

Makikita mo ang higit pang mga halimbawa ng TIY sa pagsasara ng pahina.

CSS Grammar

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

Attribute Value

Value Description
normal Default. Iset ang mixed mode sa ordinary.
multiply Iset ang mixed mode sa multiply (pagpaparami).
screen Iset ang mixed mode sa screen (screen).
overlay Iset ang mixed mode sa overlay (pamamahala).
darken Iset ang mixed mode sa overlay (pamamahala).
lighten Iset ang mixed mode sa lighten (paglaganap).
color-dodge I-set ang mode ng paghahalo sa color-dodge (mga kulay na nagbawas).
saturation I-set ang mode ng paghahalo sa saturation (saturasyon).
color I-set ang mode ng paghahalo sa color (kulay).
luminosity I-set ang mode ng paghahalo sa luminosity (brilyans).

Detalye ng Teknolohiya

Default Value: normal
Inherits: Hindi
Paggawa ng animasyon: Hindi sumusuporta. Tingnan ang:Mga katangian ng animasyon.
Versyon: CSS3
Syntax ng JavaScript: object.style.backgroundBlendMode="screen"

Higit pang mga halimbawa

Halimbawa

Tukuyin ang mode ng paghahalo bilang "multiply":

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

Subukan ito nang personal

Halimbawa

Tukuyin ang mode ng paghahalo bilang "screen":

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

Subukan ito nang personal

Halimbawa

Tukuyin ang mode ng paghahalo bilang "overlay":

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

Subukan ito nang personal

Halimbawa

Tukuyin ang mode ng paghahalo bilang "darken":

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

Subukan ito nang personal

Halimbawa

Tukuyin ang mode ng paghahalo bilang "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;
}

Subukan ito nang personal

Halimbawa

Tukuyin ang mode ng paghahalo bilang "saturation":

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

Subukan ito nang personal

Halimbawa

Tukuyin ang mode ng paghahalo bilang "color":

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

Subukan ito nang personal

Halimbawa

Tukuyin ang mode ng paghahalo bilang "luminosity":

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

Subukan ito nang personal

Halimbawa

Tukuyin ang mode ng paghahalo bilang "normal":

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

Subukan ito nang personal

Suporta ng Browser

Ang mga numero sa talahanayan ay nagpahiwatig ng unang berserker na ganap na sumusuporta sa katangian.

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