精灵图/雪碧图的实现以及优缺点
- 是什么？
- 为什么？（优点）
- 如何使用？
是什么？
文章图片
精灵图也称雪碧图，就是很多张图片放在一张图片上，用户只需请求一张图片就可以拿到所有需要的图片。开发人员利用背景图的位置去显示不同位置的图片，这是前端图片优化的一种方式。
为什么？（优点） 1、可以减小图片的总大小。
2、获取全部的图片只需一次请求，可以减少http请求的次数。
缺点：如何使用？
1、降低开发效率
2、维护难度加大
精灵图 - 锐客网
>
li {
width: 30px;
height: 30px;
background-image: url(./精灵图.gif);
background-repeat: no-repeat;
list-style-type: none;
float: left;
margin: 10px;
}/* 清楚浮动 */
.ul1::after {
content: '';
display: block;
clear: both;
}.ul2::after {
content: '';
display: block;
clear: both;
}.ul1 li:nth-child(1) {
background-position: 0 0;
}.ul1 li:nth-child(2) {
background-position: -42px 0;
}.ul1 li:nth-child(3) {
background-position: -84px 0;
}.ul1 li:nth-child(4) {
background-position: -126px 0;
}.ul1 li:nth-child(5) {
background-position: -168px 0;
}.ul1 li:nth-child(6) {
background-position: -210px 0;
}.ul2 li:nth-child(1) {
background-position: 0 -40px;
}.ul2 li:nth-child(2) {
background-position: -42px -40px;
}.ul2 li:nth-child(3) {
background-position: -84px -40px;
}.ul2 li:nth-child(4) {
background-position: -126px -40px;
}.ul2 li:nth-child(5) {
background-position: -168px -40px;
}.ul2 li:nth-child(6) {
background-position: -210px -40px;
}
文章图片
【前端基础知识|【前端基础知识】精灵图/雪碧图的实现以及优缺点】以上就是精灵图/雪碧图的内容。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。
推荐阅读
- javascript|JavaScript之变量作用域的介绍
- CSS|CSS笔记（六）-------CSS精灵图
- 移动与web前端开发|【web前端开发 | CSS】CSS高级技巧
- 重学前端|【重学前端】CSS 图像拼合技术
- CSS|CSS高级技巧——精灵图，字体图标，三角形等
- css|前端CSS高级技巧
- 工业实习日志|实习日志_2022/3/10
- 1024程序员节|CSS精灵图/字体图标/三角/用户界面模式/vertical-align/溢出文字省略号/常见布局技巧/CSS初始化
- 前端开发|CSS精灵图的原理与使用方法介绍【前端开发】