文章内容输出来源：拉勾教育大前端就业集训营
1.背景属性
- 概述：CSS中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让网页变得更加的美观。
2.背景颜色
- 属性名：background-color
- 作用：在盒子区域添加背景颜色的修饰；
- 加载区域：在border及以内加载背景颜色（margin不会加载）；
<style>
div{
width: 100px;
height: 100px;
padding: 10px;
border: 10px dashed red;
margin: 10px;
background-color: blue;
}
</style>
3.背景图片
- 属性名：background-image
- 作用：给盒子添加图片的背景修饰。
- 加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从border以内开始。
- 属性值：url(图片路径)
4.背景图是否重复
- 属性名：background-repeat
- 说明：设置添加的背景图是否要在盒子中重复进行加载。根据属性值不同，有四种重复加载方式。
- 属性值：
| 属性值 | 作用 |
|---|---|
| repeat | 重复，默认属性值，会使用背景图片重复加载填满整个盒子的背景区域 |
| no-repeat | 不重复，不论背景图是否大于盒子范围，都只加载一次图片 |
| repeat-x | 水平重复，使用背景图片铺满第一行，垂直方向无 |
| repeat-y | 垂直重复，使用背景图片铺满第一列，水平方向无 |
5.背景图片的定位
- 属性名：background-position
- 作用：主要用于设置不重复的图片在背景区域的开始加载位置。
-
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，属性值都有两个，值之间用空格分隔。
- 第一个属性值：表示背景图片在水平方向的位置。
- 第二个属性值：表示背景图片在垂直方向的位置。
-
单词表示法：
- 水平方向：left、center、right
- 垂直方向：top、center、bottom
- 单词表示图片与盒子背景区域进行对应方向的对齐。
- 像素表示法：使用px为单位的数字，表示背景图片左上角针对border以内的左上顶点水平/垂直方向位移的距离。
- 百分比表示法：使用%为单位的数字，表示背景图片左上角，在盒子border以内的宽高 - 背景图片的宽高，所在区域的位移距离。
6.背景附着
- 属性名：background-attachment
- 作用：设置背景图片是否要随着页面or盒子的滚动而滚动。
- 属性值：
| 属性值 | 说明 |
|---|---|
| scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走 |
| fixed | 固定的，背景图片定位变更为浏览器窗口的左上顶点，不会随着页面滚动而滚走 |
7.属性综合写法
- 概述：background属性可以将五个单一属性的值进行合写。
- 写法：可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
<style>
.box3{
width: 200px;
height: 200px;
background: pink right bottom url(jianshu.jpg) scroll no-repeat;
}
</style>
-
注意事项：
- 如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。
- 如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠。
<style>
div{
background: url(jianshu.jpg) center center no-repeat scroll pink;
background-color: red;
}
</style>
8.背景属性的实际应用
应用一：替换插入图
- 问题：之前的课程中提到过，h1标签是权重最高的标签，影响着SEO搜索排名。如果直接放置公司的logo图片，就不能书写搜索关键字了。
- 解决方案：想要解决SEO问题，可在h1标签中输入搜索关键字，然后用background属性添加公司logo背景图。
应用二：padding区域背景图
- 问题：无序列表或者有序列表中，每一项的前缀想要换成图片怎么办？
- 解决方案：将列表中的前缀消除后，为每一项增加padding-left属性值，宽度以前缀图片宽度决定；然后为每一项增加背景图片，位置属性值为left center即可。
9.CSS3新增背景属性
背景半透明
- 概述：CSS3 支持背景半透明的写法，颜色值增加了一种rgba模式。
- rgba模式：在rgb基础上增加了一个不透明度的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5 表示半透明。
- 书写方式：rgba(红色，绿色，蓝色，不透明度)
- 注意：背景半透明是指盒子背景颜色半透明，盒子里面的内容、盒子背景图片不受影响。
background-color: rgba(255,0,0,0.5);
背景缩放
- 属性名：background-size
- 作用：设置背景图片的尺寸。
- 属性值：
| 属性值 | 说明 |
|---|---|
| px | 1-2个像素值，只设置一个值时，以宽度为基准垂直方向等比例拉伸；设置两个值，则宽高按照像素值调整 |
| % | 1-2个百分比值，与像素值类似；百分比参考盒子的宽高属性 |
| cover | 自动调整缩放比例，把背景图缩放至足够大，以使背景图像完全覆盖背景区域，若溢出则隐藏 |
| contain | 自动调整缩放比例，把背景图缩放至足够大，保证图片完整显示在背景区域 |
多背景
- 概述：CSS3 中规定，一个盒子上，可以添加多个背景图片。
- 书写方法：background-image 的属性值书写时，以逗号分隔多背景的URL路径地址。
- 注意：背景加载时，先写的背景压盖后写的背景图片。
<style>
.box1{
background-image: url(star.jpg),url(jianshu.jpg),url(../baidu2.jpg);
}
</style>
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，愿与诸君共勉~
