Html html5/css3 中的颜色叠加 png
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16934100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
color overlay png in html5/css3
提问by Lilly
I have a lot of png-images, and now I want to change their color. I could open all these images in photoshop and add a Layer style - Color Overlay.
我有很多 png 图像，现在我想改变它们的颜色。我可以在 photoshop 中打开所有这些图像并添加图层样式 - 颜色叠加。
For example:
http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
Change the black color to gray.
例如：http:
//www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
将黑色更改为灰色。
But is there an easy way to do this with HTML5/CSS3?
但是有没有一种简单的方法可以用 HTML5/CSS3 做到这一点？
回答by andyb
It's possible with just CSS but has so major limitations it's far from a perfect solution.
仅使用 CSS 就可以实现，但有很大的局限性，远非完美的解决方案。
HTML
HTML
<img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>
CSS
CSS
img {
-webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}
The limitations being
限制是
- Webkit only
- Can only change black to something more transparent, i.e. grey. Colour masks are not possible.
- 仅 Webkit
- 只能将黑色更改为更透明的颜色，即灰色。彩色蒙版是不可能的。
See demo- Tested in Chrome 26.
请参阅演示-在 Chrome 26 中测试。
回答by Vince C
(A bit late)
（有点晚了）
If you know the background will remain the same color throughout the entire website and you don't mind messing around a bit in Photoshop, you could of course fill the transparent part with your background color and cut out the icon to make that part transparent.
如果您知道整个网站的背景将保持相同的颜色，并且您不介意在 Photoshop 中稍微弄乱一点，那么您当然可以用背景颜色填充透明部分并剪下图标以使该部分透明。
That way you can place a background color behind it and make it whatever color you want...
这样你就可以在它后面放置一个背景颜色，让它成为你想要的任何颜色......
HTML
HTML
<img src="transparencyswitch.png" height="20" width="20"/>
CSS
CSS
img {
background-color: grey;
}
回答by Maarten Wolfsen
I recommend converting your PNG into a SVG. I had the same problem, till I did that. From there, you only have to change the fill color (which can also be dynamic for, for example, wordpress)
我建议将您的 PNG 转换为 SVG。我有同样的问题，直到我做到了。从那里，您只需要更改填充颜色（也可以是动态的，例如，wordpress）
回答by imbecile
You could place the image in a div, and add opacity and a background-color to the div.
您可以将图像放在 div 中，并为 div 添加不透明度和背景色。
Check these links out for more information. The second link includes some photoshop as well:
查看这些链接以获取更多信息。第二个链接也包括一些Photoshop：
回答by Kees Sonnema
A way of doing this is to put the image in a div and put a div above that with opacity so you still can see the image a little bit but it has the color of the overlaying div. Other ways aren't possible with html5/css3.
这样做的一种方法是将图像放在一个 div 中并在其上方放置一个不透明的 div，这样您仍然可以稍微看到图像，但它具有覆盖 div 的颜色。其他方式在 html5/css3 中是不可能的。
examples: here
例子：这里
