CSS 图像拼合技术

更新时间：2020-05-31 21:18
图像拼合

图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量，并节省带宽。

图像拼合 - 简单实例

与其使用三个独立的图像，不如我们使用这种单个图像

navigation images

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

在下面的例子CSS指定显示 "组合图片" 的图像的一部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title>  
<style>
img.home {
    width: 46px;
    height: 44px;
    background: url(/upload/image/20200531/6372655559597387505558568.gif) 0 0;
}

img.next {
    width: 43px;
    height: 44px;
    background: url(/upload/image/20200531/6372655559597387505558568.gif) -91px 0;
}
</style>
</head>
<body>

<img class="home" src="/upload/image/20200531/6372655599550512504106873.gif"><br><br>
<img class="next" src="/upload/image/20200531/6372655599550512504106873.gif">

</body>
</html>

尝试一下>>

实例解析：

<img class="home" src="/upload/image/20200531/6372655599550512504106873.gif">-因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像

宽度：46px;高度：44px; - 定义我们使用的那部分图像

background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

这是使用图像拼合最简单的方法，现在我们使用链接和悬停效果。

图像拼合s - 悬停效果

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

:hover 选择器用于鼠标悬停在元素上的显示的效果， :hover 选择器可以运用于所有元素。

我们的新图像 "组合图片" 包含三个导航图像和三幅图像：

navigation images

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title>  
<style>
#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(/upload/image/20200531/6372655640581762505664996.gif) 0 0;}
#home a:hover{background: url(/upload/image/20200531/6372655640581762505664996.gif) 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url(/upload/image/20200531/6372655640581762505664996.gif) -47px 0;}
#prev a:hover{background: url(/upload/image/20200531/6372655640581762505664996.gif) -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url(/upload/image/20200531/6372655640581762505664996.gif) -91px 0;}
#next a:hover{background: url(/upload/image/20200531/6372655640581762505664996.gif) -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="http://www.995w.com"></a></li>
  <li id="prev"><a href="http://www.luofenming.com"></a></li>
  <li id="next"><a href="http://www.995w.com"></a></li>
</ul>
</body>

尝试一下>>

实例解析：

由于该列表项包含一个链接，我们可以使用：hover伪类

#home a:hover{background: url(/upload/image/20200531/6372655640581762505664996.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px