CSS-фильтр оттенков серого и режим смешивания фона одновременно?

Я пытаюсь обработать изображение так же, как это происходит в файле photoshop - обесцвечивание изображения до оттенков серого, а затем применение цветового наложения с режимом смешивания. С этой целью я создаю фоновое изображение 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;
}

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

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

enter image description here

12
background background-blend-mode css-filters css3

3 ответов

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

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

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

  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>
10

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

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

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

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

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

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

2

как отметил Джоэл в своем комментарии под принятым ответом, Это можно сделать с помощью mix-blend-mode.

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

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

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

.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/

1