【发布时间】：2015-05-16 05:13:45
【问题描述】：
我有一张白色图像，用作 div 的背景，我想着色以匹配主题的主色。我知道我可以做到：
filter: sepia() saturate(10000%) hue-rotate(30deg);
并循环通过hue-rotate 来查找颜色，但是否可以提前计算此值？鉴于指定的十六进制值非常暗，我想我还需要包含invert(%) 过滤器。
给定一个十六进制值#689d94，我需要进行什么数学运算来计算所需的hue-rotate 和invert 值以将我的白色背景图像转换为相同的颜色？
编辑
这是 div 的 sn-p，其中白色背景图像被过滤为绿色。这里的诀窍是，被过滤的是整个div，而不仅仅是图像。如果我要在div 中输入一些文本，文本颜色也会变成绿色。
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
background-size:5em;
width:5em;
height:5em;
-webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
}<div>
</div>【问题讨论】：
-
是的，它是一个实际的背景图像。
-
然后（再次AFAIK）..这是不可能的，过滤器应用于实际图像。
-
您对这个问题施加了哪些限制？我认为这可能或多或少可以使用过滤器实现：url（#mySvgFilter）。这将需要能够在页面的某处包含 svg 元素或在某处托管 SVG 文件。那会是一个可行的解决方案吗？奇怪的是，在使用颜色矩阵时，我无法让颜色完全匹配（尽管它们应该），但这可能是我误解了与混合模式相关的内容。另外，如果我可能会问，您要解决的潜在问题是什么？
-
最初我试图通过只使用一个 svg 图像来减少用户需要发出的 http 请求的数量（篮子在页面的其他地方被使用），我只是想改变使用 CSS 着色。最终，我确实使用了另外两张图片（一张是上面的深绿色，一张是黑色），但这仍然是我正在寻找答案的问题。至于限制 - 我正在寻找可以遵循的一系列步骤或程序，给定十六进制输入，给我一个过滤器和值列表，我需要使用这些过滤器和值来为我的白色图像着色。
-
是否可以使用内嵌 svg 过滤器？
标签： css css-filters