精灵图可以减少网络请求次数,有效降低页面加载延迟。
两个有用的站点:
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
block元素前后有换行效果(但是没有换行标签)。
inline、inline-block前后无换行效果,元素水平从左向右逐一排列。
2020年9月25日
【关于作者】
李艺,笔名“石桥码农,腾讯云最具价值专家(TVP),腾讯课堂启明星俱乐部成员,日行一课联合创始人兼 CTO,前 VIPKID 资深技术专家。国内早期闪客之一,具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线,为数千万人使用。从 0 到 1 创建课件标准,被团队誉为课件之父,官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1:微信全栈工程师一本通》等计算机图书,是极客时间视频畅销课《微信小程序全栈开发实战》的作者,知乎 Live 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。