CSS background-blend-mode Özelliği

CSS background-blend-mode

Css background-blend-mode özelliği resimlere veya html elemanlarına görsel efektler uygulamak için kullanılır.

Örnek:

Şimdi arka plana atanan bir resim üzerinde resmin doygunluk ayarını değiştirelim.

1

2

div {

width: 250px;

height: 250px;

background-size: 250px 250px;

background-repeat: no-repeat;

background-image: linear-gradient(to right, black 25%,

      green 100%), url('smiley.jpg');

background-blend-mode: saturation;

}

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS background-blend-mode nedir nasıl kullanılır

Css background-blend-mode özelliği ,herhangi bir renk yada resim atanan arkaplanların renkleri,doygunlukları ,parlaklıkları gibi özellikleri değiştirmemizi sağlayan, görsel efektler kullanabileceğimiz bir özelliktir.

CSS background-blend-mode	CSS background-blend-mode özellikleri
Varsayılan Değer:	normal
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript background-blend-mode:	object.style.backgroundBlendMode="overlay"

CSS background-blend-mode Tarayıcı Desteği

CSS Kodu:
background-blend-mode	35.0	Desteklemiyor	30.0	7.1	22.0

CSS background-blend-mode Değerleri

background-blend-mode:normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

CSS background-blend-mode özelliği değerleri

CSS background-blend-mode değerleri	CSS background-blend-mode değerleri tanımları	CSS Örnek Uygulamalar
normal	Varsayılan değerdir.
multiply	Renkleri çoğaltır.
screen	Ekrana karıştırma modunu ayarlar
overlay	Bindirme karıştırma modunu ayarlar
darken	Koyulaştırmak için karıştırma modunu ayarlar
lighten	Hafifletmek için karıştırma modunu ayarlar
color-dodge	Renk atlatmak için harmanlama modunu ayarlar
saturation	Doygunluk karıştırma modunu ayarlar
color	Karıştırma modunu renge göre ayarlar.
luminosity	Parlaklığı karıştırma modunu ayarlar