一：背景颜色
背景颜色一共有四种取值方式，分别为具体颜色值单词，rgb，rgba以及十六进制具体如下所示：
.box1{
background-color: red;
}
.box2{
background-color: rgb(0,255,100);
}
.box3{
background-color:rgba(0,22,232,0.7);
}
.box4{
background-color:#0ff;
}
<!--
background-color的取值:
1.background-color的取值和color一样
具体单词
rgb
rgba
十六进制
-->
二：背景图片
如何设置背景图片呢？？
CSS中有一个叫做background-image:url();的属性就是专门用于设置背景图片的
注意点：
1.图片的地址必须放在URL()中，图片的地址可以是本地地址也可以是网络地址
2.如果图片的大小没有标签的大小大，那么会自动在水平或者垂直方向填充
3.如果网页上出现了图片，那么浏览器会再次发送请求获取图片
三：背景平铺
如何控制背景图片的平铺方式？
在CSS中有个background-repeat属性，就是专门用于控制背景图片的平铺方式的
div{
width: 500px;
height: 500px;
}
.box1{
background-image: url(../images/logo@2x.png);
background-repeat:repeat-x;
}
div{
width: 980px;
height: 50px;
}
平铺的取值：
repeat：默认在水平和垂直方向都平铺
no-repeat: 在水平和垂直方向都不平铺
repeat-x: 只在水平方向平铺
repeat-y：只在垂直方向平铺
应用场景：
可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度
三：背景定位
如何控制背景图片的位置？
background-position: 0 0;
具体方位名词 具体的像素
.box1{
background-color: red;
background-image: url(../images/logo@2x.png);
background-repeat:no-repeat;
/*background-position: right top;*/
background-position: 100px 200px;
}
格式：background-position：水平方向 垂直方向；
取值：
水平方向： left right center
垂直方向： top center bottom
注意点：
同一个标签可以同时设置背景颜色盒背景图片，如果颜色和图片同时存在，图片会覆盖颜色
具体像素：
background-position： 10px 100px；
注意：一定要写单位
四： 背景关联和缩写
背景关联：
格式：
background-attachment：scroll；
默认为scroll，会随着滚动条的滚动而滚动
background-attachment：fixed；
不会随着滚动条的滚动而滚动
注意点：
background属性中，任何一个属性都可以省略默认情况下背景图片会随着滚动条的滚动而滚动，那么我们就可以修改背景图片和滚动条的关联方式
div{
width: 500px;
height: 500px;
/*background-color: red;
background-image: url(../images/logo@2x.png);
background-repeat:no-repeat;
background-position: left bottom;*/
/* background：背景颜色 背景图片 平铺方式 关联方式 定位方式*/
background: red url(../images/logo@2x.png) no-repeat left bottom;
}
body{
background-image: url(../images/logo@2x.png);
background-repeat:no-repeat;
/*background-attachment:scroll;*/
background-attachment:fixed;
}
五：背景图片和插入图片的区别
区别：
1.背景图片仅仅是一个装饰，不会占用位置
出入图片会占用位置
2. 背景图片有定位属性，所以很方便的控制图片的位置
插入图片没有定位属性，所以控制图片的位置不太方便
3. 插入图片的语义比背景图片的语义要强，所以在开发中如果你的图片想被搜索引擎收录，那么推荐使用插入图片
<div class="box2"></div>
六：精灵图片
1. 什么是CSS精灵图
一种图像的合成技术
2.作用
可以减少请求的次数以及降低服务器处理的压力
3.如何使用
CSS精灵图片需要配合背景图片和背景定位来使用
<style>
div{
background-image: url("../new_year_head.png");
}
.box1{
width: 80px;
height: 60px;
background-position: -800px -100px;
display: inline-block;
}
.box2{
width: 80px;
height: 60px;
background-position: -800px -100px;
display: inline-block;
}
.box3{
width: 80px;
height: 60px;
background-position: -600px -100px;
display: inline-block;
/*行内块级元素*/
/*为了能够让元素既能够不独占一行,又可以设置宽度和高度*/
/*那么就出现了行内块级元素*/
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>