Question

所以我试图在HTML页面中对图像使用过滤器，以便用特定颜色覆盖图像。我的样本图片是白色的：

img {
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><defs><filter id='bronzo-filter'><feColorMatrix type='luminanceToAlpha' result='L2A'/><feFlood flood-color='green' result='colorfield'/><feBlend mode='multiply' in='L2A' in2='colorfield'/><feComposite operator='in' in2='SourceGraphic'/></filter></defs></svg>#bronzo-filter");
}

<img src="https://i.stack.imgur.com/K8CIc.png">

即使将泛光颜色指定为青色，看起来结果始终是黑色图像。这是因为只有灰度图像才能适用于这种过滤叠加？

另一方面，对于这个图像，似乎使用相同的滤镜，洪水颜色得到尊重。我想回答的问题是为什么。

img {
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><defs><filter id='bronzo-filter'><feColorMatrix type='luminanceToAlpha' result='L2A'/><feFlood flood-color='green' result='colorfield'/><feBlend mode='multiply' in='L2A' in2='colorfield'/><feComposite operator='in' in2='SourceGraphic'/></filter></defs></svg>#bronzo-filter");
}

<img src="http://via.placeholder.com/350x150">

我尝试了第三张图片，第一张是#aaaaaa的灰色版本。它似乎尊重洪水的颜色。这是第三次尝试：

img {
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><defs><filter id='bronzo-filter'><feColorMatrix type='luminanceToAlpha' result='L2A'/><feFlood flood-color='green' result='colorfield'/><feBlend mode='multiply' in='L2A' in2='colorfield'/><feComposite operator='in' in2='SourceGraphic'/></filter></defs></svg>#bronzo-filter");
}

<img src="https://i.stack.imgur.com/V4gGT.png" />

经过一些测试后，我意识到洪水颜色可以简单地通过rgb指定，如rgb（208,164,114）;这仍然没有回答为什么白色图像总是变黑而其他颜色#aaaaaa总是尊重泛色的问题。

Answer 1

brightnessToAlpha将源图像转换为具有不同透明度的纯黑色图像，它实际上将亮度转换为alpha值并将常规颜色通道归零。

对于白色图像，它会将其转换为100％不透明度的纯黑色图像（rgb 0,0,0）。当你将任何东西乘以0得到0.所以当你用任何洪水颜色乘以它时，你会变黑。

对于其他非白色图像，滤镜会将其转换为部分透明的黑色图像。当它们到达混合步骤时，它们会在与洪水颜色相乘之前预先乘以完全不透明的灰色阴影，因此您会看到泛滥颜色。

对于白色图片的使用案例，您不想使用L2A，只需要简单的乘法。

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'>
<defs>
    <filter id='bronzo-filter'>
      <feFlood flood-color='green' result='colorfield'/>
      <feBlend mode='multiply' in='SourceGraphic' in2='colorfield'/>
      <feComposite operator='in' in2='SourceGraphic'/>
    </filter>
  </defs>
</svg>

泛色在某些图像上不受尊重

1 个答案: