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