CSS arka plan karışım modu Özellik
Örnek
"Açıklaştırılacak" bir arka plan görüntüsünün karıştırma modunu belirtin:
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik background-blend-mode
, her bir arka plan katmanının (renk ve/veya görüntü) karıştırma modunu tanımlar.
Varsayılan değer: | normal |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.backgroundBlendMode="ekran" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
CSS Sözdizimi
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Mülk değerleri
Value | Description | Play it |
---|---|---|
normal | This is default. Sets the blending mode to normal | |
multiply | Sets the blending mode to multiply | |
screen | Sets the blending mode to screen | |
overlay | Sets the blending mode to overlay | |
darken | Sets the blending mode to darken | |
lighten | Sets the blending mode to lighten | |
color-dodge | Sets the blending mode to color-dodge | |
saturation | Sets the blending mode to saturation | |
color | Sets the blending mode to color | |
luminosity | Sets the blending mode to luminosity |
Daha fazla örnek
Örnek
Karıştırma modunu "çarpma" olarak belirtin:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
Örnek
Karıştırma modunu "ekran" olarak belirtin:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
Örnek
"Kaplama" olacak karıştırma modunu belirtin:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
Örnek
Karıştırma modunu "karartmak" olarak belirtin:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
Örnek
Karıştırma modunu "renk atlatmak" olarak belirtin:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
Örnek
Karıştırma modunu "doygunluk" olarak belirtin:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
Örnek
Karıştırma modunu "renkli" olarak belirtin:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
Örnek
Karıştırma modunu "parlaklık" olarak belirtin:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
Örnek
Karıştırma modunu "normal" olarak belirtin:
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
İlgili Sayfalar
CSS eğitimi: CSS Arka Planı