Karışım-karışım modu - CSS Hileleri

mix-blend-modeNitelik bir elemanın içeriğin arka plan ile uyum nasıl tanımlar. Örneğin, bir

arkasındaki arka planla ilginç şekillerde harmanlanabilir.

.blend ( mix-blend-mode: exclusion; )

Yukarıdaki örnekte, içerik, tarafından değiştirilmiştir, mix-blend-modeböylece metnin renkleri arka planın dışında bırakılır. Bu, bu özellik için birçok değerden yalnızca biridir.

mix-blend-modeSaydam üzerine ayarlanan öğelerde Chrome 58+ ile ilgili bir sorun var . Bu yazının yazıldığı sırada atanan Chrome'da Sayı 711955 olarak biletlenmiştir. Bu arada, basit bir düzeltme, gövde öğesine beyaz (veya gerçekten herhangi bir) arka plan rengi atamaktır.

Değerler

initial: bir karışım modu ayarlamayan özelliğin varsayılan ayarı.
inherit: bir öğe, karışım modunu üst öğesinden devralır.
unset: geçerli karışım modunu bir öğeden kaldırır.
: Bu, aşağıdaki karışım modlarından birinin özelliğidir:
normal: bu özellik hiçbir şekilde harmanlama yapmaz.
multiply: öğe, arka planla çarpılır ve arka plan renginin yerini alır. Ortaya çıkan renk her zaman arka plan kadar koyu olur.
screen: arka planı ve içeriği çarpar ve ardından sonucu tamamlar. Bu background-color,.
kaplama: arka plan rengine bağlı olarak içeriği çarpar veya tarar. Bu, sert ışık karışım modunun tersidir.
koyulaştır: arka plan, içeriğin daha koyu olduğu içerikle değiştirilir, aksi takdirde olduğu gibi bırakılır.
lighten: arka plan, içeriğin daha açık olduğu içerikle değiştirilir.
color-dodge: Bu özellik, içeriğin rengini yansıtmak için arka plan rengini parlaklaştırır.
color-burn: Bu, içeriğin doğal rengini yansıtmak için arka planı koyulaştırır.
hard-light: içeriğin rengine bağlı olarak bu özellik onu tarar veya çoğaltır.
soft-light: içeriğin rengine bağlı olarak bu onu koyulaştırır veya açar.
difference: bu, iki renkten daha koyu olanını en açık renkten çıkarır.
exclusion: benzer differenceancak daha düşük kontrastlı.
hue: Arka planın doygunluğu ve parlaklığıyla birlikte içeriğin tonuyla bir renk oluşturur.
saturation: Arka planın tonu ve parlaklığıyla birlikte içeriğin doygunluğuyla bir renk oluşturur.
color: İçeriğin tonu ve doygunluğuyla ve arka planın parlaklığıyla bir renk oluşturur.
luminosity: İçeriğin parlaklığıyla ve arka planın tonu ve doygunluğuyla bir renk oluşturur. Bu, colorözniteliğin tersidir .

Daha normalsonra öğeyi içeren yığın bağlamıyla karıştırılması gereken yeni bir yığınlama bağlamı oluşturmak dışında bir karışım modu ayarlamanın not edilmesi gerekir.

Bu değerlerin etkisi aşağıdaki demoda gösterilmektedir:

Daha fazla bilgi

CSS Karışım modlarının temelleri
MDN'de mix-blend-mode
W3C'de mix-blend-mode
CSS Karışım Modu demoları koleksiyonu
CSS Karışım Modlarını tanıma

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.