码云学习 CSS 2021-06-14

32. CSS 图像拼合技术

文章目录隐藏

图像拼合
图像拼合 – 简单实例
图像拼合 – 创建一个导航列表
图像拼合 s – 悬停效果

图像拼合

图像拼合就是单个图像的集合。

有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会降低服务器的请求数量，并节省带宽。

图像拼合 – 简单实例

与其使用三个独立的图像，不如我们使用这种单个图像（”img_navsprites.gif”）：

测试用到的图像链接地址：https://media.mybj123.com/wp-content/uploads/2021/06/1623294187-fab399a28d99e44.gif

有了 CSS，我们可以只显示我们需要的图像的一部分。

在下面的例子 CSS 指定显示 “img_navsprites.gif” 的图像的一部分：

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

img.next {
    width: 43px;
    height: 44px;
    background: url(/images/img_navsprites.gif) -91px 0;
}

/*html*/
<img class="home" src="/images/img_trans.gif"><br><br>
<img class="next" src="/images/img_trans.gif">

效果如下：

实例解析：

<img class="home" src="img_trans.gif" /> -因为不能为空，src属性只定义了一个小的透明图像。显示的图像将是我们在 CSS 中指定的背景图像
宽度：46px;高度：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;}
#home{background:url('/images/img_navsprites.gif') 0 0;}

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

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

/*html*/
<ul id="navlist">
  <li id="home"><a href="/"></a></li>
  <li id="prev"><a href="/css/"></a></li>
  <li id="next"><a href="/css/"></a></li>
</ul>

效果如下：

实例解析：

#navlist{position:relative;} – 位置设置相对定位，让里面的绝对定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} – margin 和 padding 设置为 0，列表样式被删除，所有列表项是绝对定位
#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 宽 46px+分隔线的 1px）
#next{left:129px;width:43px;}– 右边定位 129px(#prev 63px + #prev 宽是 43px + 剩余的空间), 宽度是 43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} – 定义背景图像右边 91px（#home 46px+1px 的分割线+#prev 宽 43px+1px 的分隔线）

图像拼合 s – 悬停效果

现在，我们希望我们的导航列表中添加一个悬停效果。

:hover 选择器用于鼠标悬停在元素上的显示的效果

提示： :hover 选择器可以运用于所有元素。

我们的新图像 (“img_navsprites_hover.gif”) 包含三个导航图像和三幅图像：

图像地址：

https://media.mybj123.com/wp-content/uploads/2021/06/1623294700-40fb3db4b4210d5.gif

因为这是一个单一的图像，而不是 6 个单独的图像文件，当用户停留在图像上不会有延迟加载。

我们添加悬停效果只添加三行代码：

#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;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

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

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
/*html*/
<ul id="navlist">
  <li id="home"><a href="/"></a></li>
  <li id="prev"><a href="/"></a></li>
  <li id="next"><a href="/"></a></li>
</ul>

效果如下：

实例解析：