background-blend-mode
Misol
background-image uchun aralashtirish rejimini "lighten" qilib belgilang:
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
background-blend-mode xususiyati har bir fon qatlamining (rang va/yoki rasm) aralashtirish rejimini belgilaydi.
| Standart qiymat: | normal |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.backgroundBlendMode="screen" |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
CSS sintaksisi
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| normal | Bu standart qiymat. Aralashtirish rejimini normal ga o‘rnatadi | Demo ❯ |
| multiply | Aralashtirish rejimini multiply ga o‘rnatadi | Demo ❯ |
| screen | Aralashtirish rejimini screen ga o‘rnatadi | Demo ❯ |
| overlay | Aralashtirish rejimini overlay ga o‘rnatadi | Demo ❯ |
| darken | Aralashtirish rejimini darken ga o‘rnatadi | Demo ❯ |
| lighten | Aralashtirish rejimini lighten ga o‘rnatadi | Demo ❯ |
| color-dodge | Aralashtirish rejimini color-dodge ga o‘rnatadi | Demo ❯ |
| saturation | Aralashtirish rejimini saturation ga o‘rnatadi | Demo ❯ |
| color | Aralashtirish rejimini color ga o‘rnatadi | Demo ❯ |
| luminosity | Aralashtirish rejimini luminosity ga o‘rnatadi | Demo ❯ |
Ko‘proq misollar
Misol
Aralashtirish rejimini "multiply" qilib belgilang:
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
O‘zingiz sinab ko‘ring »
Misol
Aralashtirish rejimini "screen" qilib belgilang:
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
O‘zingiz sinab ko‘ring »
Misol
Aralashtirish rejimini "overlay" qilib belgilang:
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
O‘zingiz sinab ko‘ring »
Misol
Aralashtirish rejimini "darken" qilib belgilang:
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: darken;
}
O‘zingiz sinab ko‘ring »
Misol
Aralashtirish rejimini "color-dodge" qilib belgilang:
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color-dodge;
}
O‘zingiz sinab ko‘ring »
Misol
Aralashtirish rejimini "saturation" qilib belgilang:
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
O‘zingiz sinab ko‘ring »
Misol
Aralashtirish rejimini "color" qilib belgilang:
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
O‘zingiz sinab ko‘ring »
Misol
Aralashtirish rejimini "luminosity" qilib belgilang:
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
O‘zingiz sinab ko‘ring »
Misol
Aralashtirish rejimini "normal" qilib belgilang:
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS fon
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!