mix-blend-mode Özelliği

mix-blend-mode özelliği, ön plan renginin arka plan rengi veya arka plan resmi üzerine karışım modunu belirler. Özellik için değerler, grafik düzenleyicilerin temel modlarına benzer.

Sözdizimi

cssseçici {
  mix-blend-mode: değerler;
}

Tabloda, mix-blend-mode özelliği için temel değerler sunulmuştur:

Değerler

Değer	Açıklama
`normal`	Normal. Renk karışımı kullanılmaz. Varsayılan mod.
`multiply`	Çarpma. Bu modda, ön plan renginin değeri arka plan renginin değeri ile çarpılır. Ortaya çıkan renk her zaman daha koyu bir renktir.
`screen`	Açma. Bu modda, ön plan ve arka plan renklerinin ters değerleri çarpılır. Ortaya çıkan renk olarak her zaman daha açık bir renk uygulanır.
`overlay`	Kaplama. Bu modda, renkler ön plan rengine bağlı olarak çarpılır veya açılır. Desenler veya renkler mevcut piksellerin üzerini kaplar, ön plan renginin açık ve koyu bölgelerini değiştirmeden bırakır.

Örnek

mix-blend-mode özelliğinin varsayılan değeriyle bir resmin nasıl görüneceğine bir bakalım:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

Örnek

Şimdi karışım modunu çarpma olarak değiştirelim:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

Örnek

mix-blend-mode özelliğine kaplama değerini verelim:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат:

Ayrıca Bakınız

arka plan için kısaltma özelliği olan background özelliği
bir bloğa arka plan resmi vermek için kullanılan background-image özelliği
arka plan resmini arka plan rengi üzerine karıştırmak için kullanılan background-blend-mode özelliği