loader

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-ին, բայց շերտերը փոխվում են:

Синтаксис

Գրելաձև
mix-blend-mode: normal; ⟿ Устанавливает режим наложения на обычный.
mix-blend-mode: multiply; ⟿ Умножения верхних и нижних цветов.
mix-blend-mode: screen; ⟿ Результат инверсии двух цветов.
mix-blend-mode: overlay; ⟿ Похож на multiply.
mix-blend-mode: darken; ⟿ Результат тёмных оттенков двух цветов.
mix-blend-mode: lighten; ⟿ Результат светлых оттенков двух цветов.
mix-blend-mode: color-dodge; ⟿ Результат деления нижнего цвета на обратный верхний цвет.
mix-blend-mode: color-burn; ⟿ Результат инвертирования нижнего цвета.
mix-blend-mode: hard-light; ⟿ Похож на overlay, но со слоем обмена
mix-blend-mode: soft-light; ⟿ Похож на hard-light, но мягче.
mix-blend-mode: difference; ⟿ Инвертирование только по другому.
mix-blend-mode: exclusion; ⟿ Похож на difference, но с меньшим контрастом.
mix-blend-mode: hue; ⟿ Совмещение верхних и нижних цветов.
mix-blend-mode: saturation; ⟿ Совмещение насыщенность верхнего и светимость нижнего.
mix-blend-mode: color; ⟿ Совмещение оттенка верхнего и яркость нижнего.
mix-blend-mode: luminosity; ⟿ Совмещение яркость верхнего и оттенок нижнего. mix-blend-mode: normal; ⟿ Սահմանում է խառնուրդի ռեժիմը նորմալ.
mix-blend-mode: multiply; ⟿ Վերևի և ներքևի գույների բազմապատկում.
mix-blend-mode: screen; ⟿ Երկու գույների հակադարձման արդյունքը.
mix-blend-mode: overlay; ⟿ Նման է multiply-ին.
mix-blend-mode: darken; ⟿ Երկու մուգ գույների(երանգների) արդյունք.
mix-blend-mode: lighten; ⟿ Երկու բաց գույների(երանգների) արդյունք.
mix-blend-mode: color-dodge; ⟿ Ներքևի գույնը վերևի գույնի հակառակ կողմով բաժանելու արդյունքը.
mix-blend-mode: color-burn; ⟿ Ներքեւի գույնը շրջելու արդյունքը.
mix-blend-mode: hard-light; ⟿ Նման է overlay-ին, բայց փոխանակման շերտով
mix-blend-mode: soft-light; ⟿ Նման է hard-light-ին, բայց ավելի մեղմ.
mix-blend-mode: difference; ⟿ Ինվերսացիան պարզապես հակառակը.
mix-blend-mode: exclusion; ⟿ Նման difference-ին, բայց ավելի քիչ հակադրություն.
mix-blend-mode: hue; ⟿ Վերևի և ներքևի գույների համադրություն.
mix-blend-mode: saturation; ⟿ Համատեղելով վերևի հագեցվածությունն ու ներքևի լուսավորությունը.
mix-blend-mode: color; ⟿ Վերևի երանգի և ստորին մասի պայծառության համադրություն.
mix-blend-mode: luminosity; ⟿ Համատեղելով վերևի և ներքևի երանգի պայծառությունը.

Пример

Օրինակ

See the Pen Untitled by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

See the Pen mix-blend-mode by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

 wbr image
Поддержка браузера дляԲրաուզերի աջակցությունը mix-blend-mode элемента տարրին
Browser IE Edge Chrome Firefox Safari Opera
Version 6+ 79+ 41+ 32+ 8+ 28+
Notes