Примените шкалу яркости css -webkit-filter перед использованием background-blend-mode, сохраняя цвет

Question

Я пытаюсь добиться монохромного цветного изображения при наведении мыши, где цвета изображения преобразуются в оттенки серого, а серые оттенки впоследствии заменяются оттенком цвета, с которым я смешиваюсь.

Это может выглядеть так

Чтобы смоделировать это в фотошопе, вы можете добавить изображение в градациях серого, добавить желаемый цветовой слой сверху и смешать его с режимом экрана.

Насколько я понимаю, у css есть такой потенциал, если вы объедините фильтр css и режим background-blend-mode, но результат всегда будет в градациях серого, если вы используете фильтр.

Поэтому я спрашиваю, есть ли другие способы получить эту смесь или изображения в градациях серого раньше без фильтра CSS

Answer 1

Вы можете сделать это за один шаг, используя яркость в качестве режима наложения.

В этом режиме яркость берется из переднего слоя (изображения), а оттенок и насыщенность берутся из фона (здесь, сплошной цвет)

Следующая демонстрация дает вам также возможность назначить цветовой фильтр через класс

.test {
    width: 400px;
    height: 200px;    
    margin: 10px;
    background-size: cover;
    background-image:  url(http://placekitten.com/1000/750);
}

.test:hover {
    background-blend-mode: luminosity;
}

.red {
    background-color: red;
}

.green {
    background-color: greenyellow;
}

<div class="test red"></div>
<div class="test green"></div>

Другое решение, где черный на изображении дает полный насыщенный цвет (вместо черного). Немного сложнее в настройке, но достижимо.

.test {
    width: 400px;
    height: 200px;    
    background-size: cover;
    background-color: white;
    background-image: linear-gradient(red, red), url(http://placekitten.com/1000/750);
    background-blend-mode: screen, luminosity;
}

<div class="test"></div>

Способ получить этот эффект как класс многократного использования. Изображение уже находится в элементе, и мы просто установили класс для установки эффекта и отдельный класс для цвета.

Итак, последовательность должна быть:

• первый слой = белый
• второй слой изображения, с смесью, установленной на яркость. Таким образом, яркость изображения комбинируется с белым, что дает белый для высокой яркости и черный для низкой яркости (то есть фильтр в градациях серого)
• третий слой, сплошной цвет, с наложением на экран. это сохраняет белый цвет белым, но меняет цвет на черный.

Нам нужно использовать псевдоэлемент для окончательного смешивания, чтобы было легко установить все это с помощью независимого класса. это будет установлено с помощью mix-blend вместо background-blend:

#cat {
    width: 760px;
    height: 560px;
    background-image: url(http://placekitten.com/1000/750); 
}

.test {
    background-color: white;
    background-position: 0px 0px;
    background-size: cover;
    background-blend-mode: luminosity;
    position: relative;
}

.test:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    mix-blend-mode: screen;
    pointer-events: none;
}

.blue:after {
    background-color: blue;
}

<div class="test blue" id="cat"></div>