Arkaplan karışım modu - CSS Hileleri

background-blend-modeBir öğe en nasıl mülkiyet tanımlar background-imagekendi diliyle uyum olmalıdır background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem arka plan karıştırma moduna bakın.

Yukarıdaki demoda background-image, soldaki varsayılan ayarlı harmanlama modu yoktur ve bu nedenle görüntü background-color. Ancak sağda, karışım modu background-imagealttaki kırmızı ile değiştirildi background-color. Ancak metin renginin bu ek özellikten etkilenmediğine dikkat edin.

Değerler

initial: karıştırma içermeyen varsayılan değer.
inherit: ana öğenin karışım modunu devralır.
: arka plan görüntüsünü arka plan rengine bağlı olarak değiştirecek bir değer.

Değeri aşağıdakilerden herhangi biri olarak ayarlanabilir (aşağıda doküman içinde background-colorkırmızı):

`luminosity`: arka plan renginin doygunluğu ve tonu kullanılırken üst rengin parlaklığı korunur.

Demo

İşte bu değerlerin aşağıdakilere bağlı olarak nasıl yorumlandığına dair çalışan bir örnek background-color:

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Arka Planı harmanlama moduna bakın.

Birden çok karışım modunu zincirleme

Her arka plan katmanının yalnızca tek bir karışım modu olabilir, ancak örneğin birden çok doğrusal degradeler kullanıyorsak, her birinin kendi karışım modu olabilir ve bu da ilginç bir görüntü sağlar:

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Degradeleri ve arka plan karıştırma moduna bakın.

Bu, etkilemek istediğiniz arka plan katmanına göre bu değerleri listeleyerek elde edilir:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

İlk doğrusal gradyan, screenharmanlama moduna, ardından buna sahip olan ikinci doğrusal gradyan differenceve lightenona uygulanan birinci arka plan görüntüsüne sahiptir .