CSS 图像精灵(Sprites)

图像精灵

图像精灵是放入单个图像的图像集合。具有许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。使用图像精灵将减少服务器请求的数量并节省带宽。

我们使用这个单个图像（“img_navsprites.gif”）而不是使用三个单独的图像：

使用CSS，我们可以只显示我们需要的图像部分。在以下示例中，CSS指定要显示的“img_navsprites.gif”图像的哪个部分：

#home {
                          width: 46px;
                          height: 44px;
                          background: url(img_navsprites.gif) 0 0;
                        }

尝试一下

示例说明：

<img id="home" src="img_trans.gif"> - 仅定义小透明图像，因为src属性不能为空。显示的图像将是我们在CSS中指定的背景图像
width: 46px; height: 44px; - 定义我们想要使用的图像部分
background: url(img_navsprites.gif) 0 0; - 定义背景图像及其位置（左0px，顶部0px）

这是使用图像精灵的最简单方法，现在我们想通过使用链接和悬停效果来扩展它。

图像精灵 - 创建导航列表

我们想使用精灵图像（“img_navsprites.gif”）来创建导航列表。我们将使用HTML列表，因为它可以是链接并且还支持背景图像：

#navlist {
                          position: relative;
                        }

                        #navlist li {
                          margin: 0;
                          padding: 0;
                          list-style: none;
                          position: absolute;
                          top: 0;
                        }

                        #navlist li, #navlist a {
                          height: 44px;
                          display: block;
                        }

                        #home {
                          left: 0px;
                          width: 46px;
                          background: url('img_navsprites.gif') 0 0;
                        }

                        #prev {
                          left: 63px;
                          width: 43px;
                          background: url('img_navsprites.gif') -47px 0;
                        }

                        #next {
                          left: 129px;
                          width: 43px;
                          background: url('img_navsprites.gif') -91px 0;
                        }

尝试一下

示例说明：

#navlist {position：relative;} - position设置为relative，允许在其中进行绝对定位
#navlist li {margin：0; padding：0; list-style：none; position：absolute; top：0;} - margin和padding设置为0，list-style被删除，所有列表项都是绝对定位的
#navlist li，＃navlist a {height：44px; display：block;} - 所有图片的高度均为44px

现在开始为每个特定部分定位和样式：

#home {left：0px; width：46px;} - 一直定位在左边，图像宽度为46px
#home {background：url（img_navsprites.gif）0 0;} - 定义背景图像及其位置（左0px，顶部0px）
#prev {left：63px; width：43px;} - 向右定位63px（#home宽度为46px +项目之间的一些额外空间），宽度为43px。
#prev {background：url（'img_navsprites.gif'） - 47px 0;} - 将右侧的背景图像定义为47px（＃home width 46px + 1px line divider）
#next {left：129px; width：43px;} - 向右定位129px（#prev的开头为63px + #prev宽度43px +额外空间），宽度为43px。
#next {background：url（'img_navsprites.gif'） - 91px 0;} - 向右定义背景图像91px（＃home width 46px + 1px line divider + #prev width 43px + 1px line divider）

图像精灵 - 悬停效果

现在我们要将悬停效果添加到导航列表中。

提示：在:hover选择器可以在所有元素中使用，不仅对链接。

我们的新图像（“img_navsprites_hover.gif”）包含三个导航图像和三个用于悬停效果的图像：

因为这是一个单独的图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，将没有加载延迟。我们只添加三行代码来添加悬停效果：

#home a:hover {
                          background: url('img_navsprites_hover.gif') 0 -45px;
                        }

                        #prev a:hover {
                          background: url('img_navsprites_hover.gif') -47px -45px;
                        }

                        #next a:hover {
                          background: url('img_navsprites_hover.gif') -91px -45px;
                        }

尝试一下

示例说明：

#home a：hover {background：transparent url（'img_navsprites_hover.gif'）0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，仅向下45px

CSS 图像精灵(Sprites)

图像精灵

图像精灵 - 创建导航列表

图像精灵 - 悬停效果

相关页面