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

Question

我有一个图标,我想用CSS改变颜色.它是在CSS中内联的数据优化的SVG中.

通常情况下,这是不可能的.这就是图标字体被发明的原因; 它们相对于SVG的主要优势是能够从CSS 接收color和text-shadow规则.好吧,CSS过滤器现在能够同时处理任意图像,现在它们可以在所有Blink,Webkit和Gecko浏览器中使用,并且可以用于未来的IE/Spartan.

甲text-shadow更换是容易的; 只需使用drop-shadow过滤器.

然而,尽管所有必要的滤镜都在这里,但是将图像着色为特定的颜色已经证明是非常棘手的.到目前为止,我的理论如下:

• 使用contrast(0)转整个图像变成纯灰,同时保持alpha通道(Mozilla的维基说,它会变成黑色,但在所有的浏览器就变成灰色,必须是一个错字).
• 使用sepia(1),因为我们无法对灰度图像上的色调/饱和度进行操作.这样可以确保整个图像由我们可以进行数学运算的参考颜色组成; 特别是#AC9977.

在这一点上,我们应该能够将整个图像从现在的实体#AC9977转变为我们想要使用的任何颜色hue-rotate,saturate并且brightness.

首先,浏览器使用什么颜色坐标？如果它使用HSL(亮度)或HSV(值),我无法确定规格是否合理,但由于HSB(亮度)是HSV的另一个名称,我想它正在使用HSV.此外,使用像饱和颜色(而不是使它们变成白色)这样的东西,这将在HSV而不是HSL中发生.brightness(999)

根据这一假设,我们将按如下方式进行:

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

由于这不是手工完成的事情,我们将使用LESS预处理器:

.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);
}

根据我的理解,这应该有效.但事实并非如此.为什么以及如何使其发挥作用？

我正在努力实现的例子

将图标视为图像或元素(背景图像,基于CSS的形状等),具有任何颜色,并且具有由透明度定义的形状(不是可以简单地重叠的矩形图像).我想让它完全由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(https://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>