有没有办法用CSS着色白色PNG图像？

Question

我知道有很多css过滤器,特别是对于webkit,但我找不到一个白色(#FFFFFF)图像着色的解决方案.我尝试了一些过滤器的组合,但没有一个使我的图像着色.我只能改变灰度或棕褐色范围内的图像.

所以我的问题是:有没有办法只使用css将我的全白png改为(例如)red？

如此图所示:

Answer 1

这可以通过css masking完成,但遗憾的是浏览器支持非常糟糕(我相信webkit).

http://jsfiddle.net/uw1mu81k/1/

-webkit-mask-box-image: url(http://yourimagehere);

因为您的图像都是白色的,所以它是遮罩的理想选择.掩模的工作方式是,无论图像是白色,原始元素都显示为正常,其中原始元素的黑色(或透明)未显示.中间的任何东西都有一定程度的透明度.

编辑:

您也可以在FireFox中使用它来提供此功能svg.

http://jsfiddle.net/uw1mu81k/4/

div {
  width: 50px;
  height: 50px;
  mask: url(#mymask);
  -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);
}

<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<div style="background-color: orange;"></div>
<div style="background-color: purple;"></div>

<svg height="0" width="0">
  <mask id="mymask">
    <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" />
  </mask>
</svg>

Answer 2

我最近有同样的问题,我认为这种方法值得为未来的读者分享.试试这个

filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);

亮度会使图像变暗,棕褐色会使其略微偏黄,饱和以增加颜色,最后调整旋转以改变颜色.它不是跨浏览器友好的:

• IE不支持它

• 在chrome上,hue-rotate(25deg)会使任何图像变红,但是你需要在firefox中使用负值,例如hue-rotate(-25deg)将其变为红色.
  您可以使用它来定位mozilla浏览器:https: //css-tricks.com/snippets/css/css-hacks-targeting-firefox/

以下是我使用css处理图像/图标时使用的一些有用的提示和工具:

• 如果你有图像的svg版本,你可以使用这个工具https://icomoon.io/将它们转换为字体图标.要改变颜色,你只需要color:#f00;像字体颜色一样.
• 如果需要在悬停状态下实现此效果,请filter: brightness(0) invert();在非悬停状态下使用红色图像,并filter: brightness(1);在悬停状态下使用.Hovever这仍然无法在IE上运行
• 使用精灵表.您可以使用图像编辑工具创建自己或使用在线提供的精灵表生成器.然后,您可以使用SpriteCow获取spritesheet的每个子图像的css.

Answer 3

这可以通过引用 SVG 过滤器的 CSS 过滤器来完成。这是 SVG 过滤器（第一行值中的“1 1 1”将蓝色和绿色通道转换为红色。）

<svg width="800px" height="600px">
    <filter id="redden" color-interpolation-filters="sRGB">
        <feColorMatrix type="matrix" values="1 1 1 0 0 
                                             0 0 0 0 0 
                                             0 0 0 0 0 
                                             0 0 0 1 0"/>
    </filter>
    
    <image filter="url(#redden)" width="190" height="400" 
        preserveAspectRatio="xMinYMin slice" 
        xlink:href="https://i.stack.imgur.com/e6MUC.jpg"/>
</svg>