Эмулировать наложение цвета в Photoshop с помощью фильтров CSS?

Иногда я пытался добиться того, чего вы хотите, и не преуспел.

В любом случае у вас есть альтернатива, используя режимы наложения:

div {
    background-color: green;
    mix-blend-mode: color;
    position: absolute;
    width: 200px;
    height: 400px;
}

<div></div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Hsl-hsv_models.svg/400px-Hsl-hsv_models.svg.png" height="400">

Мне не хватает требования прозрачности. Давай еще раз попробуем :-). Недостаток: нужно установить изображение 2 раза.

#test1 {
  background: linear-gradient(red, red), url("http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png");
  width: 100%;
  height: 500px;
  background-blend-mode: hue;
  -webkit-mask-image: url("http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png");
}

body {
  background-color: lightblue;
}

<div id="test1">
</div>

Ok; скажем, желаемый результат таков: у вас есть изображение, которое будет действовать как маска. Вы хотите использовать эту маску, чтобы установить цветное наложение поверх существующего изображения, но вы хотите, чтобы цвет был указан в стилях CSS, чтобы его было легко редактировать.

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

.test {
        width: 200px;
    height: 200px;
    display: inline-block;
    background-image: url(http://i.stack.imgur.com/kxKXy.png); 
    background-size: cover;
    background-blend-mode: exclusion;
    mix-blend-mode: hard-light;
}

.testred {
    background-color: red;
}

.testblue {
    background-color: blue;
}

body {
    background: repeating-linear-gradient(45deg, lightblue 0px, lightyellow 50px);
}

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

Я добился некоторого прогресса в математике, но они не очень хороши; в идеале я считаю, что любой цвет может быть представлен максимум в следующих фильтрах CSS:

(-webkit-)filter: contrast(0) sepia(1) hue-rotate(X) saturate(Y) brightness(Z);

Другими словами, в идеале мы должны уметь выражать любой цвет в виде координат оттенка, насыщенности и яркости относительно серого цвета сепии (#AC9977).

Хотя я до сих пор не нашел способ сделать это (и не уверен, что это возможно), мне удалось сделать реализацию, которая принимает любой оттенок чистых цветов (R, G, B, C, M, Y) или любой нейтральный цвет. (белый, черный и серый). Некоторые оптимизированы (например, черный — это просто brightness(0)). Кроме того, если указанный вами цвет имеет прозрачность, эта прозрачность будет добавлена ​​как фильтр opacity.

На данный момент это код (написанный на LESS):

// Filter prefixer.
.filter(@filters) { -webkit-filter+_: @filters; filter+_: @filters; }

// Helper that conditionally adds opacity filter when color calls for it.
._conditional-opacity(@color) when (alpha(@color) < 1) {
  .filter(round(opacity(alpha(@color)), 3));
}

// Helper that adds a brightness filter when necessary.
._conditional-brightness(@channel) when (@channel < 255) {
  .filter(brightness(round(@channel / 255, 3)));
}

// Special case for pure black.
.colorize(@color) when (fade(@color, 100%) = #000) {
  .filter(brightness(0));
  ._conditional-opacity(@color);
}

// Special case for pure grey and off-by-one-grey.
.colorize(@color) when (fade(@color, 100%) = #7F7F7F),
                       (fade(@color, 100%) = #808080) {
  .filter(contrast(0));
  ._conditional-opacity(@color);
}

// Special case for shades of pure red.
.colorize(@color) when (red(@color) > 0)
                   and (green(@color) = 0)
                   and (blue(@color) = 0) {
  .filter(contrast(0) sepia(1) saturate(999));
  ._conditional-brightness(red(@color));
  ._conditional-opacity(@color);
}

// Special case for shades of pure green.
.colorize(@color) when (red(@color) = 0)
                   and (green(@color) > 0)
                   and (blue(@color) = 0) {
  .filter(contrast(0) sepia(1) hue-rotate(99deg) saturate(999));
  ._conditional-brightness(green(@color));
  ._conditional-opacity(@color);
}

// Special case for shades of pure blue.
.colorize(@color) when (red(@color) = 0)
                   and (green(@color) = 0)
                   and (blue(@color) > 0) {
  .filter(contrast(0) sepia(1) hue-rotate(199deg) saturate(999));
  ._conditional-brightness(blue(@color));
  ._conditional-opacity(@color);
}

// Special case for shades of pure cyan.
.colorize(@color) when (red(@color) = 0)
                   and (green(@color) > 0)
                   and (blue(@color) = green(@color)) {
  .filter(contrast(0) sepia(1) invert(1) saturate(999));
  ._conditional-brightness(blue(@color));
  ._conditional-opacity(@color);
}

// Special case for shades of pure magenta.
.colorize(@color) when (red(@color) = blue(@color))
                   and (green(@color) = 0)
                   and (blue(@color) > 0) {
  .filter(contrast(0) sepia(1) hue-rotate(-99deg) saturate(999));
  ._conditional-brightness(red(@color));
  ._conditional-opacity(@color);
}

// Special case for shades of pure yellow.
.colorize(@color) when (red(@color) > 0)
                   and (green(@color) = red(@color))
                   and (blue(@color) = 0) {
  .filter(contrast(0) sepia(1) hue-rotate(199deg) saturate(999) invert(1));
  ._conditional-brightness(green(@color));
  ._conditional-opacity(@color);
}

// Special case for shades of pure grey and white.
.colorize(@color) when (red(@color) = green(@color))
                   and (green(@color) = blue(@color))
                   and not (blue(@color) = 0) // We've optimized these before.
                   and not (blue(@color) = 127)
                   and not (blue(@color) = 128) {
  .filter(contrast(0) brightness(round(blue(@color) / 255 * 2 + .00765, 3)));
  ._conditional-opacity(@color);
}

.colorize(@color) when (default()) {
  // General case not figured out yet.
}

Если вы хотите поиграть с ним, вот codepen (он автоматически компилирует LESS).

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

Вам нужно будет создать фильтр SVG, на который ссылается фильтр CSS, чтобы приблизиться к этому. Это не настоящая смесь наложения — для этого требуется режим наложения. Но я думаю, что это на самом деле дает вам то, что вы хотите. Имейте в виду, что вращение оттенков в фильтрах в основном нарушено - это всего лишь приближение в пространстве RGB, которое ОЧЕНЬ неправильно передает насыщенные цвета. (На самом деле он использует оригинальную математику SVG Filter под обложками).

<svg width="800px" height="600px">
<defs>
  <filter id="fakeOverlay">
    <feColorMatrix type="luminanceToAlpha" result="L2A"/>
    <feFlood flood-color="cyan" result="colorfield"/>
    <feBlend mode="multiply" in="L2A" in2="colorfield"/>
    <feComposite operator="in" in2="SourceGraphic"/>
  </filter>
  </defs>
<image filter="url(#fakeOverlay)" width="800" height="400" xlink:href="http://i.stack.imgur.com/Mboab.png"/>
  
</svg>