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

前端之家收集整理的这篇文章主要介绍了有没有办法用CSS着色白色PNG图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道有很多css过滤器,特别是webkit,但我找不到一个白色(#FFFFFF)图像着色的解决方案.我尝试了一些过滤器的组合,但没有一个使我的图像着色.我只能在灰度或棕褐色的范围内更改图像.

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

如此图所示:

解决方法

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

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

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

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

编辑:

你也可以在svg的帮助下在FireFox中使用它.

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>
原文链接:https://www.f2er.com/css/217663.html

猜你在找的CSS相关文章