请稍候，加载中....

CSS 图像拼合

图像拼合

图像拼合也称为css精灵(css sprites)就是将许多单个小的图像集合在一张大图里，这样可以减少多次http请求(当图片数据很小时，为每一张小图片创建一个http连接就显得比较浪费，创建连接的时间已经远远超过了图片下载所需的时间)。

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

 

图像拼合实例

如下图所示，网页中会加载这三个小图标，现在将三个图标集合到"img_navsprites.gif"，这样我们只需要加载一张图片：

img_navsprites.gif

然后通过CSS，我们可以只显示我们需要的图像的一部分。

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

图像拼合实例代码

<style>
a {
    margin: 30px;
    display: block;
    height: 44px;
    width: 46px;
}
.home {
    background: url(/uploads/2022/1/a6110754-5488-42c7-8819-c6dc3031aae9.gif) 
    0 0 no-repeat;
}

.next {
    background: url(/uploads/2022/1/a6110754-5488-42c7-8819-c6dc3031aae9.gif)
     -91px 0 no-repeat; 
}
</style>
</head>
<body>

<a href="#" class="home" ></a>
<a href="#" class="next" ></a>

</body>

实例解析：

  • <a class="home" href="#"/></a> - 链接没有设置链接文本，使用display: block将链接显示为块级元素
  • 宽度：46px;高度：44px; - 定义我们使用的那部分图像宽高
  • background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

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

 

创建一个导航列表

我们想使用拼合图像 ("img_navsprites.gif")，以创建一个导航列表。

我们将使用一个HTML列表，因为它可以链接，同时还支持背景图像：

导航列表实例代码

<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('/uploads/2022/1/a6110754-5488-42c7-8819-c6dc3031aae9.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('/uploads/2022/1/a6110754-5488-42c7-8819-c6dc3031aae9.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('/uploads/2022/1/a6110754-5488-42c7-8819-c6dc3031aae9.gif') -91px 0;}
</style>
</head>

<body>
<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>
</body>

实例解析：

  • #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() 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
  • #prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
  • #prev{background:url() -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）
  • #next{left:129px;width:43px;} - 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
  • #next{background:url('') no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）

 

图像拼合悬停效果

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

使用伪类:hover就可以实现悬停效果
如下图，每张图标添加了一个hover效果，当鼠标移动到对应元素时，会显示较暗的图标，形成悬停效果


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

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

悬停效果实例代码

<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('/uploads/2022/1/d429c41e-b27d-4399-ab49-3ece23a692de.gif') 0 0;}
#home a:hover{background: url('/uploads/2022/1/d429c41e-b27d-4399-ab49-3ece23a692de.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('/uploads/2022/1/d429c41e-b27d-4399-ab49-3ece23a692de.gif') -47px 0;}
#prev a:hover{background: url('/uploads/2022/1/d429c41e-b27d-4399-ab49-3ece23a692de.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('/uploads/2022/1/d429c41e-b27d-4399-ab49-3ece23a692de.gif') -91px 0;}
#next a:hover{background: url('/uploads/2022/1/d429c41e-b27d-4399-ab49-3ece23a692de.gif') -91px -45px;}
</style>
</head>

<body>
<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>
</body>

实例解析：

  • 由于该列表项包含一个链接，我们可以使用：hover伪类
  • #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px

讨论区

Python学习手册-