2

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

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

但是有没有一种简单的方法可以用 HTML5/CSS3 做到这一点？

4

4 回答 4

4

仅使用 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
  • 只能将黑色更改为更透明的东西，即灰色。彩色面具是不可能的。

请参阅演示-在 Chrome 26 中测试。

于 2013-06-05T08:18:52.507 回答
3

（有点晚了）

如果您知道整个网站的背景将保持相同的颜色，并且您不介意在 Photoshop 中搞乱一点，您当然可以用您的背景颜色填充透明部分并剪下图标以使该部分透明。

这样，您可以在其后面放置背景颜色并使其成为您想要的任何颜色...

HTML

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

CSS

img {
    background-color: grey;
}
于 2014-01-22T12:35:22.097 回答
0

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

于 2016-06-03T11:38:18.930 回答
-2

这样做的一种方法是将图像放在一个 div 中，并在其上方放置一个不透明的 div，这样您仍然可以稍微看到图像，但它具有覆盖 div 的颜色。html5/css3 无法使用其他方式。

例子：这里

于 2013-06-05T07:45:04.460 回答