有什么方法可以仅使用CSS为白色PNG图像着色吗? [英] Is there any way to colorize a white PNG image with CSS only?

问题描述

我知道那里有很多CSS过滤器，尤其是对于Webkit，但是我找不到为白色(#FFFFFF)图像上色的解决方案.我尝试过使用滤镜的某种组合，但没有一个使我的图像着色.我只能在灰度或棕褐色的范围内更改图像.

I know there are many css filters out there especially for webkit, but I can't find a solution for colorize a white (#FFFFFF) image. I've tried some combination of the filters, but none of them make my image colorized. I can only change the image in the range of grayscale, or sepia.

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

So my question is: Is there any way to change my totally white png to (for example) red using css only?

就像这张图片所示:

推荐答案

这可以通过CSS屏蔽来完成，尽管不幸的是，浏览器支持确实很差(我相信仅适用于Webkit).

This can be done with css masking, though unfortunately browser support is really bad (I believe webkit only).

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

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

由于您的图像全是白色，因此非常适合遮罩.蒙版的工作方式是，无论图像是白色的，原始元素都显示为正常，而黑色(或透明)的原始元素则不显示.中间的任何东西都有一定程度的透明性.

Because your image is all white, it is a perfect candidate for masking. The way the mask works is that wherever the image is white, the original element is shown as normal, where black (or transparent) the original element is not shown. Anything in the middle has some level of transparency.

编辑:

在svg的少许帮助下，您也可以在FireFox中使用它.

You can also get this to work in FireFox with slight help from 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>

这篇关于有什么方法可以仅使用CSS为白色PNG图像着色吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！