如何使用 CSS3 设置 img 样式

Question

是否可以更改例如 的第一个图标的背景颜色这个网站使用 CSS3 或 WebKit 的 CSS 扩展？

我对此很陌生，希望得到一些帮助。一个链接或一个例子就很好了。

先感谢您。

Answer 1

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

您可以通过 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

尝试

img {
  background-color: #FF00FF;
}

Answer 4

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