CSS background-blend-mode ominaisuus

Määrittely ja käyttö

background-blend-mode Ominaisuus määrittelee jokaisen taustakerroksen (väri ja/tai kuva) sekoitusmallin.

Katso myös:

CSS-opas:CSS tausta

Esimerkki

Määritä taustakuvan sekoitusmalli "valaistaa" (valaistaa):

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

Kokeile itse

Voit nähdä lisää TIY-esimerkkejä sivun lopussa.

CSS-grammatiikka

background-blend-mode: tavallinen|kerrottua|näyttö|peittää|pimeä|valaistaa|väritön|kirkkaus;

ominaisarvo

arvo kuvaus
normal Oletus. Aseta sekoitusmalli tavalliseksi.
kerrottua Aseta sekoitusmalli kerrottua (kerrottua).
näyttö Aseta sekoitusmalli näyttö (näyttö).
peittää Aseta sekoitusmalli peittää (peittää).
peittää Aseta sekoitusmalli peittää (peittää).
valaistaa Aseta sekoitusmalli valaistaa (valaistaa).
color-dodge Aseta sekoitusmode color-dodge (värihienosointi).
saturation Aseta sekoitusmode saturation (satvuus).
color Aseta sekoitusmode color (väri).
luminosity Aseta sekoitusmode luminosity (kirkkaus).

Tekninen yksityiskohta

Oletusarvo: normal
Perintä: Ei
Animaation tekeminen: Ei tuettu. Katso myös:Animaatiot.
Versio: CSS3
JavaScript-kieli: object.style.backgroundBlendMode="screen"

Lisää esimerkkejä

Esimerkki

Määritä sekoitusmode "multiply"：

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

Kokeile itse

Esimerkki

Määritä sekoitusmode "screen"：

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

Kokeile itse

Esimerkki

Määritä sekoitusmode "overlay"：

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

Kokeile itse

Esimerkki

Määritä sekoitusmode "darken"：

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

Kokeile itse

Esimerkki

Määritä sekoitusmode "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;
}

Kokeile itse

Esimerkki

Määritä sekoitusmode "saturation"：

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

Kokeile itse

Esimerkki

Määritä sekoitusmode "color"：

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

Kokeile itse

Esimerkki

Määritä sekoitusmode "luminosity"：

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

Kokeile itse

Esimerkki

Määritä sekoitusmode "normal"：

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

Kokeile itse

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selaimen version, joka tukee täyttä ominaisuutta.

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