更新时间:2023-05-04 来源:黑马程序员 浏览量:
CSS 精灵,也叫 CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再用background-position 精确的定位出背景图片的位置。
精灵图的作用是减少服务器被请求次数,减轻服务器的压力,提高页面加载速度。
实现步骤:
1. 创建盒子,盒子尺寸与小图尺寸相同
2. 设置盒子背景图为精灵图
3. 添加 background-position 属性,改变背景图位置,使用 PxCook 测量小图片左上角坐标,取负数坐标为 background-position 属性值(向左上移动图片位置)。
案例:京东服务
下面我们以京东服务的图标为例。
添加上图中的精灵图,需要的代码如下:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.service {
margin: 100px auto;
width: 1190px;
height: 42px;
/* background-color: pink; */
}
.service ul {
display: flex;
}
.service li {
display: flex;
padding-left: 40px;
width: 297px;
height: 42px;
/* background-color: skyblue; */
}
.service li h5 {
margin-right: 10px;
width: 36px;
height: 42px;
/* background-color: pink; */
background: url(./images/sprite.png) 0 -192px;
}
.service li:nth-child(2) h5 {
background-position: -41px -192px;
}
.service li:nth-child(3) h5 {
background-position: -82px -192px;
}
.service li:nth-child(4) h5 {
background-position: -123px -192px;
}
.service li p {
font-size: 18px;
color: #444;
font-weight: 700;
line-height: 42px;
}
</style>