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.


ULASHISH

Ta’rif va qo‘llanilishi

mix-blend-mode xususiyati element kontenti o‘zining bevosita ota elementi foni bilan qanday aralashishi kerakligini belgilaydi.

Demoni ko‘rsatish ❯

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!