CSS 精灵

柔情只为你懂 2022-11-11 13:05 199阅读 0赞

### CSS 精灵 ###

*   *  图像精灵
     *  图像精灵 - 简单的例子
     *   *   *  实例
             *  例子解释
     *  图像精灵 - 创建导航列表
     *   *   *  实例
             *  例子解释
     *  图像精灵 - 悬停效果
     *   *   *  实例
             *  例子解释

--------------------

## 图像精灵 ##

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽。

--------------------

## 图像精灵 - 简单的例子 ##

我们使用以下单幅图像（“navsprites.gif”）而不是使用三幅单独的图像：  
![在这里插入图片描述][20210320102251563.gif]  
通过使用 CSS，我们可以仅显示所需图像的某个部分。

在下面的例子中，CSS 指定了显示 “navsprites.gif” 图像的哪部分：

#### 实例 ####

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

#### 例子解释 ####

*  `<img id="home" src="trans.gif">` \- 仅定义小的透明图像，因为 src 属性不能为空。而实际显示的图像将是我们在 CSS 中指定的背景图像。
 *  `width: 46px; height: 44px;` \- 定义我们要使用的图像部分
 *  `background: url(navsprites.gif) 0 0;` \- 定义背景图片及其位置（left 0px, top 0px）

--------------------

## 图像精灵 - 创建导航列表 ##

我们希望使用精灵图片（“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;}` \- 位置设置为相对，以允许在其中进行绝对定位
 *  `#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}` \- 外边距和内边距设置为 0，删除 list-style，并且所有列表项都均为绝对定位
 *  `#navlist li, #navlist a {height:44px;display:block;}` \- 所有图片的高度均为 44px

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

*  `#home {left:0px;width:46px;}` \- 一直向左定位，图像宽度 46px
 *  `#home {background:url(navsprites.gif) 0 0;}` \- 定义背景图片及其位置（left 0px, top 0px）
 *  `#prev {left:63px;width:43px;}` \- 向右定位 63px（\#home 宽度 46px + 项目之间的一些额外空间），宽度 43px。
 *  `#prev {background:url('navsprites.gif') -47px 0;}` \- 定义背景图片向右 47px（\#home 宽度 46px + 1px 分隔线）
 *  `#next {left:129px;width:43px;}` \- 向右定位 129px（\#prev 开始是 63px + \#prev 的宽度是 43px + 多余的空格），宽度 43px。
 *  `#next {background:url('navsprites.gif') -91px 0;}` \- 定义背景图片向右 91px（\#home 宽度 46px + 1px 分隔线+ \#prev 宽度 43px + 1px 分隔线）

--------------------

## 图像精灵 - 悬停效果 ##

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

**提示：**:hover 选择器可用于所有元素，而不仅限于链接。

我们的新图像（“navsprites\_hover.gif”）包含三幅导航图像和三幅用于悬停效果的图像：  
![在这里插入图片描述][2021032010324989.gif]  
因为这是一幅图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，不会有**加载延迟**。

我们仅添加三行代码来实现悬停效果：

#### 实例 ####

#home a:hover { 
      background: url('navsprites_hover.gif') 0 -45px;
    }
    
    #prev a:hover { 
      background: url('navsprites_hover.gif') -47px -45px;
    }
    
    #next a:hover { 
      background: url('navsprites_hover.gif') -91px -45px;
    }

#### 例子解释 ####

`#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;}` \- 我们为所有三个悬停图像指定相同的背景位置，仅向下 45 像素

[20210320102251563.gif]: /images/20221022/cb3cd2fc00c34979b1efc7d6135f539d.png
[2021032010324989.gif]: /images/20221022/a16aee758bef496091e9a6d9f40561dd.png