如何使用CSS3设置img的样式

Question

是否可以更改背景颜色，例如带有CSS3的this site的第一个图标，还是WebKit的CSS扩展名？

我是新手，希望得到一些帮助。链接或示例会很棒。

提前谢谢。

Answer 1

虽然您可以为图像设置样式，但在CSS3中无法更改Icon的颜色，因为它需要混合模式。

您可以使用HTML5 Canvas实现此目的

// Color

var over  = someCanvas.getContext('2d');

// Icon
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

使用https://github.com/Phrogz/context-blender来实现这一目标。

Answer 2

如果图标图像具有透明背景，那么您可以在图像后面设置CSS背景颜色，如下所示：

background: #c00 url(kombine-iphone-icons.png); /* Puts a red background behind the icon image */

不幸的是，CSS 3（或任何WebKit的CSS扩展）中没有任何内容可以让您更改图像的颜色。

Answer 3

是的，您可以使用css3设置图像样式。但有些东西告诉我，你的问题实际上更具体，看起来像..

Answer 4

尝试

img {
  background-color: #FF00FF;
}