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