CSS-фильтр серого и background-blend-mode одновременно?

Я пытаюсь обработать изображение таким же образом, как и в файле фотошопа - обесцветить изображение до градаций серого, а затем применить наложение цвета в режиме многократного наложения. Для этого я создаю фоновое изображение CSS с помощью...

.someclass
{
    /* grayscale */
    -webkit-filter: grayscale(1); 
    filter: gray; 
    filter: grayscale(1);
    filter: url(desaturate.svg#greyscale);

    /* multiply */
    background-color: rgba(190, 50, 50, 0.65);
    background-blend-mode: multiply;
}

Проблема с этим состоит в том, что фильтр оттенков серого заканчивает обесцвечивающий красный цвет для режима смешивания. Другими словами, сначала происходит умножение, а затем - оттенки серого. Как мне переключить его так, чтобы сначала применялась шкала серого, а затем - режим наложения?

Я создал скрипку ( http://jsfiddle.net/g54LcoL1/1/) для кода и снимок экрана (сделанный в Photoshop) того, что, как я ожидаю, будет выглядеть результат скрипки. Самое нижнее изображение, div.grayscale.multiply, должен быть окрашен в красный цвет.

4 ответа

Решение

Вы не можете сделать это с фильтром, но вы можете сделать это, оставаясь в режиме смешивания для всего

эквивалентом оттенков серого в смеси является яркость, с изображением в качестве источника и сплошным белым цветом в качестве фона

Итак, фоновые изображения снизу вверх:

  1. белый (как цвет фона)
  2. ваше изображение
  3. сплошной красный (это должно быть указано как градиент на данный момент)

и режимы наложения - яркость и умножение

.test {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(0deg, red, red), url("http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg");
  background-color: white;
  background-blend-mode: multiply, luminosity;
  background-size: cover;
}
<div class="test"></div>

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

Предложена функция filter() для ссылок на изображения, поэтому теоретически вы сможете применить фильтр к любому изображению по мере его загрузки. Я думаю, что это идея

.someclass {
    background-image: filter(cat.jpg, grayscale(100%));
    background-color: red;
    background-blend-mode: multiply;
}

К сожалению, я не думаю, что это где-то реализовано, это только в черновой версии спецификации фильтров.

В общем, порядок операций в терминах этих типов CSS-эффектов "постобработки" определяется в том же порядке, что и для SVG: сначала выполняется фильтрация, затем отсечение, затем маскирование, затем смешивание.

(См. Blending & Compositing Spec.) Итак, вы ничего не можете сделать с точки зрения изменения этого, я боюсь.

Как отметил Джоэл в своем комментарии под принятым ответом, это можно сделать, используя mix-blend-mode,

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

Также я собираюсь использовать режим смешивания "screen" вместо "multiply", потому что он демонстрирует удаление цвета более четко.

С удалением цвета:

.image-wrapper {
    background: red;
    display: inline-block;
}

.image-wrapper img {
    mix-blend-mode: screen;
    filter: grayscale(100%);
}
<div class="image-wrapper">
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/>
</div>

Без удаления цвета:

.image-wrapper {
    background: red;
    display: inline-block;
}

.image-wrapper img {
    mix-blend-mode: screen;
}
<div class="image-wrapper">
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/>
</div>

Более подробную информацию можно найти здесь:

https://css-tricks.com/almanac/properties/m/mix-blend-mode/

100% СМЕШИВАНИЕ-РЕЖИМ

        red  =========================================
                                                |
   cat     =======                              ==== Blending (luminosity)
                  |                             |
                  ==== Blending (multiply) ===
                  |
   white =========

Другие вопросы по тегам