background-blend-mode Özelliği

background-blend-mode özelliği, bir arka plan görselinin arka plan rengi veya diğer görsellerle karıştırılma modunu belirler. Bu özellikte, aynı sırayla uygulanacak olan birden fazla değer virgülle ayrılarak da belirtilebilir. Özellik için kullanılan değerler, grafik düzenleyicilerin temel karıştırma modlarına benzer.

Sözdizimi

cssseçici {
  background-blend-mode: modlar;
}

Tabloda, background-blend-mode özelliği için temel değerler gösterilmektedir:

Değerler

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

Örnek

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

html<div id="elem"></div>

css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

Şimdi background-blend-mode özelliğinin değerini çarpma olarak değiştirelim:

html<div id="elem"></div>

css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

Görselimiz için açma modunu ayarlayalım:

html<div id="elem"></div>

css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ayrıca Bakınız

arka plan için kısayol özellik olan background özelliği
bir bloğa arka plan resmi vermek için kullanılan background-image özelliği
kaynak renklerin arka plan görselinin üzerine bindirilmesini sağlayan mix-blend-mode özelliği
filtrelerin uygulanmasına izin veren backdrop-filter özelliği