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.

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; }

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

Yorumlar

Popüler yayınlar

HTML Metin Biçimlendirme Etiketleri

HTML hr Etiketi

HTML em Etiketi

CSS justify-content Özelliği

HTML pre Etiketi

HTML table Etiketi

CSS align-items özelliği

HTML menu Etiketi

CSS flex-basis Özelliği

CSS content Özelliği