About css sprites

转载自https://davidwalsh.name/css-sprites

The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:

Fewer images for the browser to download, which means fewer requests to the server.

1. Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
2. No ugly mouseover code. No JavaScript -- only CSS!

For this example, I've used the DW illustration. I have a color version and a grayscale version which I have merged into one file as you can see below.

Now, it's time to see how the system works.

View Demo

The HTML

<a href="http://domain.com" id="logo-link"> </a>

Just a very simple anchor tag with a unique ID.

The CSS

#logo-link
{
	width:191px;
	height:151px;
	text-decoration:none;
	display:block;
	background-image:url(dw-logo-sprite.jpg);
	background-position:191px 0;
}
#logo-link:hover,#logo-link:active	{ background-position:0 0; }

When the image initially loads, I want the grayscale version, which is on the right site. For this reason, I set the link's initial background position 191 pixels to the left. When someone mouseovers the link, however, I want to show the color version. It's only then that I remove the 191 pixels.

Wanna see the working version?

View Demo