有没有办法只用 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 masking 来完成，但不幸的是浏览器支持真的很差(我相信只有 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屋！