本节介绍css的背景属性以及应用效果
- css常用的背景属性
- 背景应用
css3新增背景属性
css常用背景属性
css中的背景是由background属性来设置背景的，它是一个综合属性，可以拆分为单一的属性
背景颜色background-color
属性名：background-color
作用：在盒模型border以内区域改变或者添加背景颜色
代码示范：
div{
background-color: red;
}背景图片background-image
属性名：background-image
属性值：url（路径）
作用：给盒子添加图片背景，图片不够覆盖住盒子会重复铺满盒子背景
代码示范：
div{
background-image: url();/*图片路径*/
}背景重复background-repeat
属性名：background-repeat
作用：设置添加背景图是否重复进行加载
属性值：repeat（默认值）、no-repeat、repeat--x、repeat--y
| 属性值 | 作用 |
|---|---|
| repeat | 默认值，重复加载图片填满盒子背景区域 |
| no-repeat | 不重复加载图片 |
| repeat--x | 重复加载水平方向 |
| repeat--y | 重复加载垂直方向 |
代码示范：
div{
background-repeat:no-repeat
}背景定位background-position
属性名：background-position
作用：设置不重复图片的加载位置
属性值：left、right、center、top、center、bottom、px、%，必须要有两个值，一个x轴，一个y轴
代码片段
背景附着background-attachment
属性名：background-position
作用：设置背景图片是否随着页面滚动
属性值：scroll、fixed（固定）
综合写法background
属性值：可以有1-5个属性值，值之间用空格隔开，背景定位的两个属性值不能被分开写，算作其中的一个属性值，五个属性值位置可以随意书写
代码片段
背景应用
以图换字
一般h1标签是权重最高的，内部会放置最重要内容，比如logo图片、最大的标题等
h1内部文字也可以提高seo搜索排名又想使用文字且使用图片就需要用到以图换字
div{
text-indent:-30em;
white-space:nowrap;
overflow:hidden;
}精灵图应用
精灵图应用：当用户访问网站时，网页上每一张图都要经过一次请求才能展现给用户，但是网页中有许多小背景图作修饰，会影响网页的加载速度，这时候就要将小背景图集合成一张图片进行加载
实际操作：
1、要设置好背景图的宽度
2、精灵图放的都是装饰的小背景图
3、精灵图可以x轴、y轴摆放
代码片段
css3新增背景属性
背景半透明
rgba模式：在rgb基础增加一个透明度，取值范围0-1，值越小，透明度越高
书写方式：rgba(红色，绿色，蓝色，不透明度)
注意：透明度只对背景有用，内容不影响
代码示范：
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid red;
width: 400px;
height: 400px;
margin: 100px auto;
background-color:rgba(232, 211, 255,0.2);
}背景缩放background-size
作用：缩放背景图的比例大小
属性值：px值、%、cover（自动调整缩放比例，溢出会被隐藏）、contain（自动调整缩放比例，把图片扩展到展示区域最大化）