CSS mix-blend-mode özelliği

Tanım ve kullanım

mix-blend-mode özelliği, elementin içeriğinin doğrudan ebeveyn arka planıyla nasıl karıştırılacağını belirler.

Ayrıca bkz.:

CSS referans el kitabı:CSS background-blend-mode Özelliği

Örnek

Kırmızı arka planlı bir konteyner ve bu kırmızı konteynerle birleşen görsel (karanlık):

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: koyulaştırma;
}

Kişisel olarak deneyin

Daha fazla TIY örneği, sayfanın altında bulunabilir.

CSS dilbilgisi

mix-blend-mode: normal|çarpma|ekran|yüzeysel|koyulaştırma|aydınlatma|renk-çalma|renk-yakma|fark|dışlama|ton|doygunluk|renk|lüminans;

Özellik değeri

Değer Açıklama
normal Bu varsayılan değerdir. Karışım modunu normal olarak ayarlayın.
çarpma Karışım modunu çarpma olarak ayarlayın.
ekran Karışım modunu ekran olarak ayarlayın.
yüzeysel Karışım modunu yüzeysel olarak ayarlayın.
koyulaştırma Karışım modunu koyulaştırma olarak ayarlayın.
aydınlatma Karışım modunu aydınlatma olarak ayarlayın.
renk-çalma Karışım modunu renk-çalma olarak ayarlayın.
renk-yakma Karışım modunu renk-yakma olarak ayarlayın.
fark Karışım modunu fark olarak ayarlayın.
dışlama Karışım modunu dışlama olarak ayarlayın.
ton Karışım modunu ton olarak ayarlayın.
doygunluk Karışım modunu doygunluk olarak ayarlayın.
renk Karışım modunu renk olarak ayarlayın.
lüminans Karışım modunu lüminans olarak ayarlayın.

Teknik ayrıntılar

Varsayılan değer: normal
Kalıtım: Hayır
Animasyon üretimi: Desteklenmiyor. Bakınız:Animasyonla ilgili özellikler.
JavaScript dilbilgisi: object.style.mixBlendMode = "darken"

Daha fazla örnek

Örnek

Tüm değerleri göster:

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Kişisel olarak deneyin

Örnek

mix-blend-mode kullanarak yanıt verilebilir cutout/knockout metin (çıkartma metni) oluşturun:

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Kişisel olarak deneyin

Tarayıcı Desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0