How do I style an img with CSS3

is it possible to change the background-color of e.g. the first icon of this site with CSS3, or WebKit’s CSS extensions?

I'm new to this and would appreciate some help. A link or an example would be g开发者_JAVA技巧reat.

Thank you in advance.

Although you can style an Image, but changing color of Icon is not possible in CSS3 as it requires Blending modes.

You can achieve this with HTML5 Canvas

// Color

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

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

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

use https://github.com/Phrogz/context-blender for achieving this.

If the icon image had a transparent background, then you could set the CSS background colour behind the image like this:

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

Unfortunately, there’s nothing in CSS 3 (or any of WebKit’s CSS extensions) that lets you change the colour of images.

Try

img {
  background-color: #FF00FF;
}

Yes, you can style an image with css3. But something tells me that you question is actually more specific that it looks like..