Cвойство mix-blend-mode опреляет режим смешивания цветов выбранного элемента с нижележащими слоями.
Normal - это верхний цвет, независимо от того, что представляет собой нижний цвет.
Multiply - результат умножения верхнего и нижнего цветов. Черный слой приводит к черному окончательному слою, а белый слой не приводит к изменению.
Screen - является результатом инверсии цветов, их умножения и инвертирования этого значения. Черный слой не приводит к изменению, а белый слой приводит к белому окончательному слою.
Overlay - Для этого режима цвета умножаются или осветляются в зависимости от основного цвета.
Darken - конечный цвет состоит из самых темных значений каждого объекта.
Lighten - конечный цвет состоит из самых светлых значений каждого объекта.
Color-dodge - Основной цвет заменяется более ярким цветом, чтобы отразить смешанный цвет, уменьшая контраст между двумя цветами.
Color-burn - Основной цвет заменяется более тёмным для отражения совмещённого цвета в результате увеличения контраста между двумя цветами.
Hard-light - С помощью этого режима цвета умножаются или осветляются, в зависимости от совмещенного цвета. Этот эффект похож на освещение изображения ярким светом прожектора. Если цвет (источник света) более светлый, чем 50% серого, то изображение становится светлее.
Soft-light - похож на hard-light, но мягче. Этот режим смешивания ведет себя аналогично hard-light.
Difference - Результат вычитания более темного из более светлого. Черный слой не действует, а белый слой инвертирует цвет другого слоя.
Exclusion - похож на difference, но с меньшим контрастом. Как и difference, черный слой не действует, а белый слой инвертирует цвет другого слоя.
Hue - В этом режиме создается цветовой результат с яркостью, насыщенностью основного цвета и оттенком совмещенного цвета.
Saturation - В этом режиме создаётся цвет с яркостью, цветовым тоном основного цвета и насыщенностью совмещённого цвета.
Color - Имеет оттенок и насыщенность верхнего цвета, при этом используется яркость нижнего цвета. Эффект сохраняет уровни серого и может использоваться для раскрашивания переднего плана.
Luminosity - имеет яркость верхнего цвета, используя оттенок и насыщенность нижнего цвета. Этот режим смешивания эквивалентен color, но при этом слои меняются местами.
mix-blend-mode հատկությունը որոշում է, թե ինչպես են միախառնվում միմյանց վրա տեղադրված շերտերի գույները:
Normal - Վերին շերտի գույնն է լինելու, անկախ նրանից, թե որն է ներքևի շերտի գույնը:
Multiply - Վերևի և ներքևի շերտերի գույների բազմապատկման արդյունքը. Սև շերտը բերում է սև վերջնական շերտի, մինչդեռ սպիտակ շերտը չի փոխում ոչինչ:
Screen - հանդիսանում է գույների ինվերսիաների, դրանց արտադրյալի և այս արժեքը ինվերսացնելու արդյունք: Սև շերտը չի ենթարկվում փոփոխության, մինչդեռ սպիտակ շերտը բերում է սպիտակ վերջնական շերտի:
Overlay - Այս ռեժիմի համար գույները բազմապատկվում կամ լուսավորվում են՝ կախված հիմնական գույնից:
Darken - Վերջնական գույնը բաղկացած է յուրաքանչյուր օբյեկտի ամենախավար արժեքներից:
Lighten - Վերջնական գույնը բաղկացած է յուրաքանչյուր օբյեկտի ամենալուսավոր արժեքներից:
Color-dodge - Հիմնական գույնը փոխարինվում է ավելի վառ գույնով, որպեսզի արտացոլի միաձուլված գույնը՝ նվազեցնելով երկու գույների կոնտրաստը:
Color-burn - Հիմնական գույնը փոխարինվում է ավելի մուգ գույնով, որպեսզի արտացոլի միաձուլված գույնը` մեծացնելով կոնտրաստը երկու գույների միջև:
Hard-light - Այս ռեժիմի դեպքում գույները բազմապատկվում կամ լուսավորվում են՝ կախված միաձուլված գույնից: Այս էֆեկտը նման է պայծառ լուսավորող պրոեկտորին : Եթե գույնը (լույսի աղբյուրը) ավելի բաց է, քան մոխրագույնի 50%-ը, ապա պատկերն ավելի բաց է դառնում:
Soft-light - Նման է hard-light-ին, բայց ավելի մեղմ: Այս խառնուրդի ռեժիմը վարվում է նույն կերպ, ինչ hard-light-ը:
Difference - Ավելի մուգը բացից հանելու արդյունքը. Սև շերտը ազդեցություն չի ունենում, իսկ սպիտակ շերտը հակադարձում է մյուս շերտի գույնը։
Exclusion - Նման է difference-ին, բայց ավելի քիչ հակադրությամբ: Ինչպես difference-ը, սև շերտը ազդեցություն չունի, իսկ սպիտակ շերտը հակադարձում է մյուս շերտի գույնը:
Hue - Այս ռեժիմը գունային արդյունք է տալիս՝ հիմնական գույնի լուսավորությամբ, հագեցվածությամբ և խառնուրդի գույնի երանգով:
Saturation - Այս ռեժիմը ստեղծում է լուսավորությամբ, հիմնական գույնի երանգով և խառնուրդի գույնի հագեցվածությամբ:
Color - Ունի վերին գույնի երանգը և հագեցվածությունը, մինչդեռ օգտագործում է ստորին գույնի լուսավորությունը: Էֆեկտը պահպանում է մոխրագույնի մակարդակը և կարող է օգտագործվել առաջին պլանը գունավորելու համար։
Luminosity - Ունի վերին գույնի լուսավորությունը՝ օգտագործելով ներքևի գույնի երանգը և հագեցվածությունը: Այս միաձուլման ռեժիմը համարժեք է color-ին, բայց շերտերը փոխվում են:
See the Pen Untitled by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
See the Pen mix-blend-mode by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
⇓Результат данного примера показан на рисунке⇓
⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓
| Browser | IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| Version | 6+ | 79+ | 41+ | 32+ | 8+ | 28+ |
| Notes |