相关疑难解决方法(0)

我有一个白色图像,我用作div的背景,我想颜色以匹配主题主色.我知道我能做到:

filter: sepia() saturate(10000%) hue-rotate(30deg);

并循环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);
}

<div>
  </div>

是否可以使用CSS在WebKit浏览器中使用CSS着色具有特定颜色的图像而无需覆盖？

尝试失败

• 管理使用图像棕褐色或任意颜色着色hue-rotate但无法找到用特定颜色着色的方法.
• 创建"色调"SVG过滤器并调用它-webkit-filter: url(#tint)在Chrome上不起作用.
• opacity/ box-shadowcss属性与drop-shadow/ opacityfilters的所有可能组合都不会产生所需的效果.

思路

• 给定一个颜色,是不是有可能的HSB过滤器组合(hue-rotate,saturation,brightness)产生的色彩？

我有兴趣动态修改具有透明背景的图像,并使用CSS实现这一点.

我真正需要的是创建一种轮廓,以便所有非透明像素都应用了它们.在这种情况下,黑色.

之前和之后应该看起来像这样:

请注意,两个图像都具有透明背景.

是否有可用于使用CSS执行此操作的方法？

如果没有,是否有一种简单的方法来生成剪影并在客户端,在网页上下文中切换两个图像？可以假设现代浏览器.

非常感谢任何形式的帮助.

任何人都知道一种方法,我可以让CSS制作一个透明的PNG图像看起来像一个轮廓完全变黑？

换句话说 - 来自这样的事情:

对此:

这是很多图像的原因,这就是为什么我想通过Photoshop避免这样做.