我有一个白色图像,我用作div的背景,我想颜色以匹配主题主色.我知道我能做到:
filter: sepia() saturate(10000%) hue-rotate(30deg);
Run Code Online (Sandbox Code Playgroud)
并循环hue-rotate查找颜色,但是可以提前计算这个值吗?鉴于指定的十六进制值非常暗,我想我也需要包含invert(%)过滤器.
鉴于十六进制值#689d94什么数学做我需要做什么来计算期望hue-rotate和invert我的白色背景图像转换成相同颜色值?
这是一个div白色背景图像被绿色过滤的片段.这里的诀窍是,它是整个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);
}Run Code Online (Sandbox Code Playgroud)
<div>
</div>Run Code Online (Sandbox Code Playgroud)