前端学习——css图像拼合技术（精灵图）

红太狼 2022-10-17 00:52 142阅读 0赞

> Author：Vivi  
> Time：2021-5-31 20：52

图像拼接就是将很多很多的小图标放在一张图片上,称之为雪碧图或精灵图（CSS Sprites）。

一、使用雪碧图的优点如下：  
1、将多张图片合并到一张图片中，可以减小图片的总大小。  
2、将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3NTIwbGtt_size_16_color_FFFFFF_t_70]  
sprites图其实就是将一大块图用来做背景图，与普通背景图不同的是：sprites图只在某固定位置显示某部分图。

案例一：图像拼合 - 创建一个导航列表  
使用拼合图像 (“img\_navsprites.gif”)，以创建一个导航列表。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.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('/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;}
    </style>
    </head>
    
    <body>
    <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>
    </body>
    </html>

![在这里插入图片描述][20210531204650958.png]  
\#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 - 悬停效果  
导航列表中添加一个悬停效果。  
新精灵图像 (“img\_navsprites\_hover.gif”) 包含三个导航图像和三幅图像：  
![在这里插入图片描述][20210531204934285.png]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.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('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;}
    </style>
    </head>
    
    <body>
    <ul id="navlist">
      <li id="home"><a href="default.asp"></a></li>
      <li id="prev"><a href="css_intro.asp"></a></li>
      <li id="next"><a href="css_syntax.asp"></a></li>
    </ul>
    </body>
    </html>

\#home a:hover\{background: transparent url(img\_navsprites\_hover.gif) 0 -45px;\} - 对于所有三个悬停图像，指定相同的背景位置，只是每个再向下45px  
![在这里插入图片描述][20210531205111523.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3NTIwbGtt_size_16_color_FFFFFF_t_70]: /images/20221014/f2e24e4dc378407b85ca62ee58385ef6.png
[20210531204650958.png]: /images/20221014/46381452319c4830907e32f972c6deaa.png
[20210531204934285.png]: /images/20221014/70474206d41a423aa1b3ae68f21e132d.png
[20210531205111523.png]: /images/20221014/d54f501e8337410ca5731b575c9db7e4.png