CSS 精灵图的使用；精灵图不见了；如果一次性设置多个精灵图

最新推荐文章于 2023-02-02 14:40:44 发布

小航哥sir

最新推荐文章于 2023-02-02 14:40:44 发布

阅读量1.5k

点赞数 3

分类专栏： css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/hangshao_123/article/details/121432069

版权

css 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1. 先来一波排错：

为什么精灵图无法显示？

容器太小，图片显示不全
容器是行内元素，没有内容，宽高没有撑开。可以转化为块级/行内块，设置宽高

背景图片的url地址写错

检查背景图片绝对引用/相对引用是否正确
background-position的尺寸没有用负数；没有加px单位
background-position的位置设置不正确
css类名添加错误

2. 精灵图是什么

也叫CSS sprites，把很多小图片拼合放到一张大的图片里。再利用background的属性进行精准定位到容器里

3. 适合什么

适合小图标的icon素材，十几到几十像素。
不适合大的产品图，不适合需要频繁更换的图片。

4. 为什么要使用精灵图

使用精灵图能够减少请求服务器和服务器响应的次数，能够减少服务器的压力。
服务器只需要响应一次大图片，页面上面很多小图标就都可以使用。

5. 精灵图的使用步骤

设置好容器，调整容器的大小
- ```
<div class="box"></div>
```

设置好背景图片的样式，背景图片的地址，背景图片的位置和大小

        .box {
            width: 24px;
            height: 24px;
            margin: 100px auto;
            background-color: pink;
        }

background: url(images/sprite.png) no-repeat;

添加如上代码，显示：

6. 精灵图能否调整大小

可以。

操作步骤是：

按照原有的尺寸，先把精灵图摆放好，
再把背景图片放大，修改【background-size】属性
再调整【background-position属性】
修改的是width，那么就需要调整x坐标的值；修改的是y，就需要调整y坐标的值。

如上图，建议先改width，再改x坐标。
此外，容器的大小可能也需要调整。
最后，注意原本图片调整的宽高比，如果不同，图片可能会变形。

7. 多个循环精灵图

利用JavaScript代码实现，前提是精灵图的排布有规律。Y坐标第一个是0，第二个是-44px，第三个是-88px。

可以利用for循环 i*44 的算法即可实现

        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        var index;
        for (var i = 0; i <= lis.length; i++) {
            index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }