css精灵_CSS精灵

css精灵

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:

CSS Sprite的想法很天才。 对于那些不了解子画面概念的人来说，子画面本质上是将多个图形编译成一个图像。 使用精灵的优点是：

1. Fewer images for the browser to download, which means fewer requests to the server.
   可供浏览器下载的图像更少，这意味着对服务器的请求更少。
2. Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
   总图像大小通常较小，因此用户的下载时间更少，带宽消耗也更少。
3. No ugly mouseover code. No JavaScript -- only CSS!
   没有难看的鼠标悬停代码。 没有JavaScript-只有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.

在此示例中，我使用了DW插图。 我有一个彩色版本和一个灰度版本，它们已经合并到一个文件中，如下所示。

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

现在，该看一下系统如何工作了。

View Demo 观看演示

HTML (The HTML)

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

Just a very simple anchor tag with a unique ID.

只是一个具有唯一ID的非常简单的锚标记。

CSS (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.

最初加载图像时，我需要合适位置的灰度版本。 因此，我将链接的初始背景位置设置为左侧191像素。 但是，当有人将鼠标悬停在链接上时，我想显示颜色版本。 只有到那时，我才删除了191个像素。

Wanna see the working version?

想查看工作版本吗？

View Demo 观看演示

翻译自: https://davidwalsh.name/css-sprites

css精灵