Различные результаты при использовании mix-blend-mode и background-blend-mode

Я заметил, что при использовании mix-blend-mode результат отличается от результата background-blend-mode, хотя вы используете тот же режим смешивания.Различные результаты при использовании mix-blend-mode и background-blend-mode

Например, сравните 2 результаты ниже:

Я скопировал в моей установке и JSFiddles ниже:

HTML

<div class="background"> 
    <div class="overlay"></div> 
</div>

CSS

.background{ 
    width:200px; 
    height:200px; 
    //background-color:green; //toggle depending on what you want to use 
    background-blend-mode:soft-light; 
    background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg'); 
    background-size:cover; 
} 

.overlay{ 
    width:100%; 
    height:100%; 
    background-color:green; //toggle depending on what you want to use 
    mix-blend-mode:soft-light; 
}

JSFiddle

Используя смесь-смесь-режим: https://jsfiddle.net/p8gkna87/

Использование фона-Blend-режим: https://jsfiddle.net/p8gkna87/1/

Некоторые справочная информация

Я в настоящее время реплицирует дизайн фотошопа, который использует e soft blight mode и в то же время также использует непрозрачность 51%. Таким образом, он не сможет использовать background-blend-mode, поскольку непрозрачность не может быть применена к одному и тому же объекту.

источник

2016-12-13 user2019515

Да, вы можете применить непрозрачность на том же объекте ... Или вы не имеете в виду непрозрачность на фоне? – vals

@vals Идея состоит в том, что цвет составляет 51% непрозрачности на мягком свете, в то время как фон остается на 100% непрозрачности. Я не думаю, что использование такого же слоя было бы возможно в этом случае. Тем не менее, я просто понял, что это может работать с rgba - просто попробовал это, и это, похоже, работает. Тем не менее, первоначальный вопрос по-прежнему остается - почему существует разница между 2 режимами смешивания. – user2019515

Да, вы можете использовать 'rgba', чтобы сделать цвет фона полупрозрачным, не влияя на фоновое изображение. – LGSon

background-blend-mode смеси с background-image и его background-color.

mix-blend-mode сочетается с фоне, часть того, что находится позади себя, и его background-color.

Вот статья, описывающая mix-blend-mode довольно хорошо:

http://alistapart.com/article/blending-modes-demystified

Помещенный по-другому, и в вашем случае, с вашим mix-blend-mode вы смешиваете зеленого цвета на верхней части изображения, с вашим background-blend-mode вы делаете наоборот.

Итак, имея тот же порядок слоев, как blend-modes выглядят одинаково

.background, 
 
.background2{ 
 
    display: inline-block; 
 
} 
 

 
.background{ 
 
    width:200px; 
 
    height:200px; 
 
    background-color:green; 
 
} 
 
.overlay{ 
 
    width:100%; 
 
    height:100%; 
 
    mix-blend-mode:soft-light; 
 
    background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg'); 
 
    background-size:cover; 
 
} 
 

 
.background2{ 
 
    width:200px; 
 
    height:200px; 
 
    background-color:green; 
 
    background-blend-mode:soft-light; 
 
    background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg'); 
 
    background-size:cover; 
 
}

<div class="background"> 
 
    <div class="overlay"></div> 
 
</div> 
 

 
<div class="background2"> 
 
</div>

источник

2016-12-13 21:16:41 LGSon

Возможно, мне что-то не хватает, но я не верю, что какие-либо изображения сейчас смешались? Они просто отображают исходное изображение – user2019515

@ user2019515 Это правильно. Удалили образец, поскольку они ничего не доказывают. – LGSon

Кажется, что «зеленый» цвет используется как в левых, так и в правых изображениях результатов, поэтому кажется, что mix-blend-mode использует зеленый цвет, но, скорее всего, по-другому (что я пытаюсь чтобы добраться до низа) – user2019515

Мне кажется, что mix-blend-mode также использует background-color, чтобы смешать его, когда background-blend-mode нет. тест с использованием и изменения background-color, а также: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-blend-mode

источник

2016-12-13 21:08:16

У вас есть уже хороший ответ от LGSon.

Просто чтобы прояснить это немного дальше:

слои, которые вы должны здесь находятся, от Боттона к началу:

фона элемента цвет фона
фон элемент изображения
оверлейный элемент background-color

Применяется метод background-blendmode внутри фона элемента, в этом случае слой 2 над слоем 1

Смесь-смесь-режим применяет элемент 3 по результатам 1 + 2

Таким образом, если только один из них является efffective, то order is inverse

источник

2016-12-13 22:12:22 vals

Спасибо ... +1. .. это выглядит больше _academic_ :) – LGSon

Хотя объяснение в значительной степени одно и то же :-) – vals

Различные результаты при использовании mix-blend-mode и background-blend-mode

ответ

Смежные вопросы