我正在参加[码上掘金挑战赛]详情请看：码上掘金挑战赛来了！
雪碧图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.btn {
border: 1px solid red;
width: 168px;
height: 50px;
background-color: #D35151;
background-image: url(img/12.png);
background-position: -3px -67px;
/* background-position: -194px -131px; */
}
.btn:hover {
background-position: -3px -3px;
}
.btn:active {
background-position: -3px -131px;
}
</style>
</head>
<body>
<div class="btn"></div>
</body>
结果（原图来源：网络）
原图：
结论
雪碧图、精灵图：需要将很多图片放到一张图片上，需要缓存外部资源，提高页面的加载速度。页面有时候有非常多的小图标，因为web外部资源问题，导致会发大量的请求到服务器
这类图片以png结尾。背景是透明的
背景样式1——背景图片的处理
背景样式的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1800px;
height: 1880px;
border: 1px solid red;
color: red;
/* background: red;
background: url(img/dog.png); */
background-color: #0780B5;
/* 注意：当块的大小和图片大小不一致的时候，图片有可能会出现复制 */
background-image: url(img/python.jpg);
background-repeat: no-repeat;
/* background-repeat: repeat-x; */
/* background-size: 800px 600px; */
/* background-position: 100px 100px; */
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box">
1234567890
</div>
</body>
</html>
结论
自适应图片全部填充：background-size: cover;
background-attachment: fixed：背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
fixed :表示背景相对于视口固定。一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local:表示背景相对于元素的内容固定。一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll:表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。
background-repeat:repeat :背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复.
background-size:背景图片大小,可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸.auto:以背景图片的比例缩放背景图片。cover:缩放背景图片以完全覆盖背景区.contain:缩放背景图片以完全装入背景区，可能背景区部分空白.\
背景样式2——文字在图片上浮动
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-image: url(img/cat.webp);
background-repeat: no-repeat;
/* background-position: top; */
background-size: cover;
background-attachment: fixed;
}
p {
color: white;
text-align: center;
}
</style>
</head>
<body>
<p>1234567890</p>
<p>1234567890</p>
<p>1234567890</p>
<p>1234567890</p>
<p>1234567890</p>
<p>1234567890</p>
<p>1234567890</p>
<p>1234567890</p>
<p>1234567890</p>
<p>1234567890</p>
<p>0987654321</p>
<p>0987654321</p>
<p>0987654321</p>
<p>0987654321</p>
<p>0987654321</p>
<p>0987654321</p>
<p>0987654321</p>
<p>0987654321</p>
<p>0987654321</p>
<p>0987654321</p>
</body>
</html>
结论
background-position :为背景图片设置初始位置。
