css精灵图如何取图

比眉伴天荒 2022-10-25 11:29 223阅读 0赞

**css精灵技术：将网页中的一些背景图像整合到一张大图中，减少请求服务器的次数。**  
*精灵图的使用：*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
假如我想取这张图片的 q 出来，应该怎么办呢？  
步骤一：打开firewords，将图片导入。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
步骤二：点击右上角，如下图，将图片锁住，这样图片位置才不怕被移动。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
步骤三：如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
步骤四：观察左下方这些数值。前期工作做好啦  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]  
接下来，搞代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .q {
        
                /* 宽高和我们切片的宽高一样 */
                width: 81px;
                height: 59px;
                /* 背景图片就是整个大的精灵图，我们要的图片只要那张，所以no-repeat，网页，向右为正方向，向下为正方向，因此我们 */
                /* 像左定位和向上定位为负数。一般精灵图上去图片的坐标都是负数 */
                background: url(images/word1.jpg) no-repeat -253px -184px;
                /* 因为span为行内元素，不能设置宽高的，因此我们要把他转为行内快元素才行 */
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <span class="q"></span>
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]  
同理，可以取出其他的小图片出来，就类似于切片技术。下次如果你们要将网页上的某张小图片搞出来，也可以采用这种方法哟~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/d724cb3a888d4b5788cff43cef78c920.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/96b2ebdef8724b19aa42d54f1030722c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/37e53cdd3e7e42689de0523059639dd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/1fd9d0b1f631424fb53e7859b08bf7f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: /images/20221024/048281cbec8a4ccd864134e09ad3dd7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]: /images/20221024/934b525f336b406ea91589c4100e4795.png