CSS background-blend-mode Özelliği

Tanım ve Kullanım

background-blend-mode Özellik, her arka plan katmanının (renk ve/veya görsel) karma modunu tanımlar.

Ayrıca bkz.:

CSS Eğitimi:CSS Arka Plan

Örnek

Arka plan görselin karma modunu 'lighten' (parıltı) olarak belirleyin:

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

Kişisel olarak deneyin

Daha fazla TIY örneği sayfasının sonunda görebilirsiniz.

CSS Grameri

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

Özellik değeri

Değer Açıklama
normal Varsayılan. Karma modunu normal olarak ayarlayın.
multiply Karma modunu 'multiply' (çarp) olarak ayarlayın.
screen Karma modunu 'screen' (ekran) olarak ayarlayın.
overlay Karma modunu 'overlay' (çerçeve) olarak ayarlayın.
darken Karma modunu 'overlay' (çerçeve) olarak ayarlayın.
lighten Karma modunu ayarlamak için 'lighten' (parıltı) olarak ayarlayın.
color-dodge Karışım modunu color-dodge（renk azaltma）olarak ayarlayın。
saturation Karışım modunu saturation（doyma）olarak ayarlayın。
color Karışım modunu color（renk）olarak ayarlayın。
luminosity Karışım modunu luminosity（parlaklık）olarak ayarlayın。

Teknik ayrıntılar

Varsayılan değer： normal
Miras: Hayır
Animasyon yapımı： Desteklenmiyor. Bakınız:Animasyonla ilgili özellikler。
Sürüm： CSS3
JavaScript dilbilgisi： object.style.backgroundBlendMode="screen"

Daha fazla örnek

Örnek

Karışım modunu "multiply" olarak belirleyin：

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

Kişisel olarak deneyin

Örnek

Karışım modunu "screen" olarak belirleyin：

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

Kişisel olarak deneyin

Örnek

Karışım modunu "overlay" olarak belirleyin：

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

Kişisel olarak deneyin

Örnek

Karışım modunu "darken" olarak belirleyin：

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

Kişisel olarak deneyin

Örnek

Karışım modunu "color-dodge" olarak belirleyin：

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

Kişisel olarak deneyin

Örnek

Karışım modunu "saturation" olarak belirleyin：

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

Kişisel olarak deneyin

Örnek

Karışım modunu "color" olarak belirleyin：

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

Kişisel olarak deneyin

Örnek

Karışım modunu "luminosity" olarak belirleyin：

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

Kişisel olarak deneyin

Örnek

Karışım modunu "normal" olarak belirleyin：

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

Kişisel olarak deneyin

Tarayıcı desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

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