background-position属性
background-position属性可以设置背景图片出现在盒子的什么位置
background-position:100px 200px;必须带单位否则无效
同样可以使用 top bottom center right 描述图片出现的位置
background-position :百分比 | 值 |top |right |bottom |left |center
| 值 | 说明 | 注意 |
|---|---|---|
| 长度值（x,y) | 第一个值水平位置，第二个值垂直位置。左上角（0，0） | 只写一个参数的话，第二个默认为居中 |
| 百分比（x%,y%) | 第一个值水平位置的百分比，第二个值垂直位置的百分比。 | 只写一个参数的话，第二个默认为居中 |
| top | 顶部显示，相当于垂直方向0 | 只写一个参数的话，第二个默认为居中 |
| right | 右边显示，相当于水平方向100% | 只写一个参数的话，第二个默认为居中 |
| left | 左边显示，相当于水平方向0 | 只写一个参数的话，第二个默认为居中 |
| bottom | 底部显示，相当于垂直方向100% | 只写一个参数的话，第二个默认为居中 |
| center | 居中显示，相当于水平方向50%或者垂直方向50% | 水平，垂直方向都居中 |
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width:600px;
height:400px;
border: 1px solid #000;
background-image:url("logo.png");
background-size:50% auto;
background-repeat:no-repeat;
background-position:100px 100px;
}
.box2 {
width:600px;
height:400px;
border: 1px solid #000;
background-image:url("logo.png");
background-size:50% auto;
background-repeat:no-repeat;
background-position:center center;
}
.box3 {
width:600px;
height:400px;
border: 1px solid #000;
background-image:url("logo.png");
background-size:50% auto;
background-repeat:no-repeat;
background-position:center bottom;
}
.box4 {
width:600px;
height:400px;
border: 1px solid #000;
background-image:url("logo.png");
background-size:50% auto;
background-repeat:no-repeat;
background-position:top right;
}
.box5 {
width:600px;
height:400px;
border: 1px solid #000;
background-image:url("logo.png");
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
}
.box5 {
width:600px;
height:400px;
border: 1px solid #000;
background-image:url("logo.png");
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
CSS精灵技术
css精灵：==将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个== 这样的技术叫做css精灵技术，也叫做css雪碧图
css精灵可以减少HTTP的请求数，加快网页显示速度，缺点也比较明显：不方便测量，后期改动麻烦。
一般情况下：使用精灵图时都使用小标签比如 i em 等通过绝对定位使行内的小标签脱离标准文档流，进而设置其宽高 宽高根据精灵图中所需要的图片大小进行设置，等属性；再利用background-position属性将精灵图中小图标移动至规定位置、、、
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
position:absolute;
top:100px;
left:500px;
width: 87px;
height: 58px;
/* border: 1px solid #000; */
border-radius:3px;
background-image:url("../../../image/weixin.png");
background-position: -10px -10px;
}
.box2 {
position:absolute;
top:100px;
left:300px;
width: 87px;
height: 58px;
/* border: 1px solid #000; */
border-radius:3px;
background-image:url("../../../image/weixin.png");
background-position: -10px 68px;
}
ul {
list-style:none;
}
ul li {
position:relative;
padding-left:25px;
margin-bottom:20px;
}
i.dg {
position:absolute;
top:-5px;
left:0;
width: 20px;
height: 31px;
border: 1px solid #000;
background-image:url("../../../image/icons.png");
background-size:100px 100px;
background-position: -15px -15px;
}
</style>
</head>
<body>
<i class="box1"></i>
<i class="box2"></i>
<ul>
<li><i class="dg"></i>我是列表项</li>
<li><i class="dg"></i>我是列表项</li>
<li><i class="dg"></i>我是列表项</li>
<li><i class="dg"></i>我是列表项</li>
<li><i class="dg"></i>我是列表项</li>
<li><i class="dg"></i>我是列表项</li>
</ul>
</body>
</html>
最后是背景综合属性
背景设置的简写不分先后顺序
background: 背景颜色 背景图片 背景重复 背景位置
注：背景颜色是当背景图片有透明时才会显示。
