mix-blend-mode
Misol
Qizil fonli konteyner va qizil konteyner bilan aralashadigan rasm (darken):
.container {
background-color: red;
}
.container img {
mix-blend-mode: darken;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
mix-blend-mode xususiyati element kontenti o‘zining bevosita ota elementi foni bilan qanday aralashishi kerakligini belgilaydi.
| Standart qiymat: | normal |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| JavaScript sintaksisi: | object.style.mixBlendMode = "darken" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| mix-blend-mode | 41.0 | 79.0 | 32.0 | 8.0 | 35.0 |
CSS sintaksisi
mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|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 ❯ |
| color-burn | Aralashtirish rejimini color-burn qilib o‘rnatadi | Demo ❯ |
| difference | Aralashtirish rejimini difference qilib o‘rnatadi | Demo ❯ |
| exclusion | Aralashtirish rejimini exclusion qilib o‘rnatadi | Demo ❯ |
| hue | Aralashtirish rejimini hue qilib 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
Barcha qiymatlar namoyishi:
.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}
O‘zingiz sinab ko‘ring »
Misol
mix-blend-mode yordamida moslashuvchan kesib olingan (cutout/knockout) matn yaratish:
.image-container {
background-image: url("paris.jpg");
background-size: cover;
position: relative;
height: 300px;
}
.text {
background-color: white;
color: black;
font-size: 10vw;
font-weight: bold;
margin: 0 auto;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: CSS background-blend-mode xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!