About css sprites

CSS Sprites 技术详解

最新推荐文章于 2024-11-30 11:29:35 发布

转载最新推荐文章于 2024-11-30 11:29:35 发布 · 423 阅读

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种减少网页加载时间和HTTP请求次数的技术——CSS Sprites。通过将多个小图标整合到一张图片中，并利用CSS背景定位显示所需部分，可以有效提升网页性能。文章通过一个实际例子展示了如何使用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.

Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
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