Maelezo ya chaguo cha background-blend-mode cha CSS

Umbali na matumizi

background-blend-mode Maelezo ya sababu inadefini modi ya kusaidia ya mabara ya mbali (mwanga na/au picha).

Tazama pia:

Mwongozo wa CSS:Hisia vifurushi

Mfano

Tumia modi ya kusaidia ya picha ya mabara kwa kugawaza (kuzima):

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

Jifunze tena

Unaweza kuona mifano ya TIY zaidi kwenye mto wa muda wa msimbo.

Insha ya CSS

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

Mwainisho wa sababu

Mwainisho Maelezo
normal Kwa kuzingatia mtaani. Ingiza modi ya kusaidia kwa kuzingatia kwa ujumbe.
kutoa Ingiza modi ya kusaidia kwa kutoa (kutoa).
kusikia Ingiza modi ya kusaidia kwa kusikia (kusikia).
kugawaza Ingiza modi ya kusaidia kwa kugawaza (kugawaza).
kugawaza Ingiza modi ya kusaidia kwa kugawaza (kugawaza).
kuzima Ingiza modi ya kusaidia kwa kuzingatia (kuzima).
color-dodge Inaelewa na kuangalia kwa color-dodge (mabaya).
saturation Inaelewa na kuangalia kwa saturation (mabaya).
color Inaelewa na kuangalia kwa color (mabaya).
luminosity Inaelewa na kuangalia kwa luminosity (mabaya).

Maelezo ya teknolojia

Thamani ya kuzingatia: normal
Kumuwinda: Hakuna
Kufanya hali ya huzuni: Hakuna muungano. Tazama:Mafuta ya hali ya huzuni.
Marejeo: CSS3
Inayofanyika na Kiingilizi: object.style.backgroundBlendMode="screen"

Mafanikio mengi

Mfano

Inaelewa na kuangalia kwa "multiply":

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

Jifunze tena

Mfano

Inaelewa na kuangalia kwa "screen":

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

Jifunze tena

Mfano

Inaelewa na kuangalia kwa "overlay":

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

Jifunze tena

Mfano

Inaelewa na kuangalia kwa "darken":

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

Jifunze tena

Mfano

Inaelewa na kuangalia kwa "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;
}

Jifunze tena

Mfano

Inaelewa na kuangalia kwa "saturation":

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

Jifunze tena

Mfano

Inaelewa na kuangalia kwa "color":

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

Jifunze tena

Mfano

Inaelewa na kuangalia kwa "luminosity":

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

Jifunze tena

Mfano

Inaelewa na kuangalia kwa "normal":

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

Jifunze tena

Muungano wa kina

Mafuatili ya thamani katika tablica inaonyesha sababu kuu ya kusaidia kwa kufungua tabia hii kwa kina ya kwanza ya kusaidia.

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