忙里偷闲，写一些笔记，还是蛮有意思的。
文章内容输出来源：拉勾教育大前端就业集训营
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
结束语：一花一世界，一木一浮生，愿与诸君共勉~
网友评论