html5 / css3中的颜色叠加png

Question

我有很多png图像，现在我想改变它们的颜色。我可以在photoshop中打开所有这些图像并添加图层样式 - 颜色叠加。

例如： http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
将黑色更改为灰色。

但使用HTML5 / CSS3有一种简单的方法吗？

Answer 1

只有CSS才有可能，但它有很大的局限性，远远不是一个完美的解决方案。

<强> HTML

<img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>

<强> CSS

img {
    -webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}

限制

• 仅限Webkit
• 只能将黑色变为更透明的东西，即灰色。无法使用彩色面罩。

See demo - 在Chrome 26中测试。

Answer 2

（有点晚）

如果您知道整个网站的背景颜色将保持不变，并且您不介意在Photoshop中弄乱一些颜色，您当然可以用您的背景颜色填充透明部分并剪切图标以使其成为部分透明。

这样你可以在它背后放置一个背景颜色，并使它成为你想要的颜色......

<强> HTML

<img src="transparencyswitch.png" height="20" width="20"/>

<强> CSS

img {
    background-color: grey;
}

Answer 3

您可以将图像放在div中，并为div添加不透明度和背景颜色。

查看这些链接以获取更多信息。第二个链接包括一些photoshop：

1. http://www.impressivewebs.com/image-tint-blend-css/
2. http://mattersofgrey.com/png-background-color-change-with-css/

Answer 4

我建议您将PNG转换为SVG。我有同样的问题，直到我这样做。从那里，你只需要改变填充颜色（也可以是动态的，例如，wordpress）

Answer 5

这样做的一种方法是将图像放在div中并将div放在不透明度的上方，这样你仍然可以看到一点点图像，但它具有重叠div的颜色。 html5 / css3无法实现其他方式。

示例：here