使用 CSS 过滤器模拟 Photoshop 的“颜色叠加”？

Question

我有一个图标，我想使用 CSS 更改它的颜色。它位于 CSS 中内联的数据 uri 优化的 SVG 中。

通常，这是不可能的。这就是发明图标字体的原因。与 SVG 相比，它们的主要优势是能够从 CSS 接收 color 和 text-shadow 规则。好吧，CSS filters 现在能够对任意图像执行这两种操作，they now work in all Blink, Webkit and Gecko browsers 和 can be expected for future IE/Spartan。

text-shadow 替换很容易；只需使用drop-shadow filter。

然而，尽管所有必要的过滤器都在这里，但事实证明，将图像着色为特定颜色非常棘手。到目前为止，我的理论如下：

• 使用contrast(0) 将整个图像变成纯灰色，同时保留 Alpha 通道（Mozilla wiki 说它会变成黑色，但在所有浏览器中它都会变成灰色，一定是错字）。
• 使用sepia(1)，因为我们无法对灰度图像的色相/饱和度进行操作。这确保了整个图像由我们可以进行数学运算的参考颜色组成；具体来说，#AC9977。

此时，我们应该能够使用hue-rotate、saturate 和brightness 将整个图像从现在的纯色#AC9977 转换为我们想要的任何颜色。

首先，浏览器使用什么颜色坐标？我无法确定 the spec 是否有意义，以确定它是否使用 HSL (Lightness) or HSV (Value)，但由于 HSB（Brightness）是 HSV 的另一个名称，我想它正在使用 HSV。此外，使用 brightness(999) 之类的东西会使颜色饱和（而不是使它们变成白色），这会在 HSV 中发生，但不会在 HSL 中发生。

基于这个假设，我们将进行如下操作：

• 计算#AC9977与我们想要的颜色之间的色相差异，并使用hue-rotate。
• 计算两者之间的饱和度差异，并使用saturate。
• 计算两者之间的亮度差，并使用brightness。

由于这不是手工完成的工作，我们将使用LESS preprocessor：

.colorize(@color) {
    @sepiaGrey: #AC9977;
    @hOffset: (hsvhue(@color) - hsvhue(@sepiaGrey)) * 1deg;
    @sRatio: unit(hsvsaturation(@color) / hsvsaturation(@sepiaGrey));
    @vRatio: unit(hsvvalue(@color) / hsvvalue(@sepiaGrey));
    -webkit-filter: contrast(0) sepia(1) hue-rotate(@hOffset) saturate(@sRatio) brightness(@vRatio);
    filter: contrast(0) sepia(1) hue-rotate(@hOffset) saturate(@sRatio) brightness(@vRatio);
}

据我了解，这应该可行。 But it isn't。 为什么，以及如何让它发挥作用？

我想要实现的示例

将图标视为图像或元素（背景图像、基于 CSS 的形状等），具有任何颜色，并具有由透明度定义的形状（非 em> 一个可以简单叠加的矩形图像）。我想让它完全由带有 CSS 的特定颜色组成（大概是使用filters）。

                

我计划将其实现为带有颜色参数的LESS mixin，但仅指导 HSB 函数背后的逻辑就足够了。

Answer 1

我有时试图实现你想要的，但没有成功。

无论如何，您还有其他选择，使用混合模式：

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>

好的；假设想要的结果是：您有一个图像，它将充当掩码。您想使用此蒙版在现有图像上设置彩色叠加层，但您希望在 CSS 样式中指定颜色，以便轻松编辑。

如果您可以更改图像，以便使用的通道是发光度而不是 alpha，则以下示例可以是您的解决方案 你需要一个灰色和黑色的滤镜，像这样

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

Answer 2

我在数学上取得了一些进步，但它们并不漂亮；理想情况下，我相信任何颜色最多可以在以下 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.
}

如果你想玩它，here's a codepen（它会自动编译 LESS）。

请注意，这还不够好，如果您发布更好的答案（包括使用不同的方法来解决问题），我可能会接受您的答案，并且不会接受我自己的答案，除非它可以代表任何给定的颜色（它目前不能；我现在可能已经放弃了）。

Answer 3

您必须创建一个通过 CSS 过滤器引用的 SVG 过滤器才能接近这一点。它不是真正的叠加混合 - 需要混合模式。但我认为它实际上可以让你得到你想要的。请注意，滤镜中的色相旋转基本上被破坏了——它只是 RGB 空间中的一个近似值，它使饱和颜色非常错误。 （它实际上在幕后使用了原始的 SVG 过滤器数学）。

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