10.3【前端开发】背景图片：如何使用精灵图？

LIYI

发布于 2020-10-26 15:47:06

8830

发布于 2020-10-26 15:47:06

文章被收录于专栏：艺述论专栏艺述论专栏

精灵图可以减少网络请求次数，有效降低页面加载延迟。

如何生成精灵图？

两个有用的站点：

https://www.spritecow.com/

可以选择、查看指定背景块的样式。

https://www.toptal.com/developers/css/sprite-generator

可以将小图片合成精灵图。下载精灵图后，可以使用webp工具，将其转换为webp格式，进一步降低图片文件大小。

示例：

    <h1>如何使用精灵图？</h1>
    <style>
        .bg-starsolid {
            display: block;
            width: 28px;
            height: 28px;
            background: url('./css_sprites.png') -97px -259px;
        }
        .bg-b1 {
            /* display: block; */
            width: 320px;
            height: 229px;
            background: url('./css_sprites.png') -10px -10px;
        }
        .bg-star {
            display: block;
            width: 67px;
            height: 67px;
            background: url('./css_sprites.png') -10px -259px;
        }
</style>
    <span class="bg-starsolid">starsolid</span>
    <span class="bg-b1">b1</span>
    <span class="bg-star">star</span>

效果：

如果没有设置display:block或inline-block，或float:left，是没有效果的。为什么？

块级元素
行内级元素

行内级元素没有宽高（但margin、padding可以起作用），块级元素有宽高。

块级元素 -> 行内级元素：　display:inline; 
行内级元素 -> 块级元素：　display:block; 或 设置float

inline-block与inline、block有什么区别？

block元素前后有换行效果（但是没有换行标签）。

inline、inline-block前后无换行效果，元素水平从左向右逐一排列。

2020年9月25日

【关于作者】

李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。

参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-10-04，如有侵权请联系 cloudcommunity@tencent.com 删除

c++