后台看到同学们留言想学习CSS背景属性，今天我们来一起来回顾下。
学习目标
今天的咱们主要来学习CSS中的各种属性，CSS的属性经过CSS1、CSS2、CSS3的迭代，已经非常多了。对于常用的CSS属性，一定要了解、掌握，并亲自在Demo中试试来加深理解。
接下来，主要学习一下CSS的背景属性。
CSS属性介绍 - 背景属性
背景属性(background)，主要设置HTML元素的背景，比如一个按钮的背景颜色、一段文字的背景图片等等。相关的属性有：
background：支持子属性的任意组合
background-color：设置背景颜色
background-image：设置背景图片
background-position：设置背景图片的定位
background-repeat：设置背景图片的平铺模式
background-attachment：设置背景图片的滚动模式
background-clip：设置背景的绘制区域
background-origin：设置背景的定位区域
background-size：设置背景的尺寸
background-color
使用单一颜色来作为元素背景，会填充元素的内容区域、内边距区域、边框区域。属性值主要有三种，分别为：
颜色值
transparent默认，透明
inherit继承父级
看如下代码片段：
<!-- CSS背景属性 - background-color -->
<style>
.demo{
width: 300px;
height: 20px;
}
.color-1 {
/*使用颜色名称作为值，red:红色, blue:蓝色等颜色名，尽量少用*/
background-color: red;
}
.color-2 {
/*使用颜色的rgb值(0-255, 黑-白)，不是很直观，尽量少用*/
background-color: rgb(127,127,127);
}
.color-3 {
/*使用颜色的十六进制值(0-F, 黑-白)，推荐使用*/
background: #ff00ff;
}
</style>
<div></div>
<div></div>
<div></div>
展示结果如下，可以看到三个div呈现不同的背景颜色。
background-image
使用图片来作为元素背景，会填充元素的内容区域、内边距区域、边框区域。默认会对齐元素的左上角，然后沿着水平、垂直进行平铺。属性值主要有：
url("URL")
none无背景
inherit继承父级
准备背景图片
放置到.html文件的同级目录中。
然后，看如下代码片段：
<!-- CSS背景属性 - background-image -->
<style>
.demo-image{
width: 500px;
height: 500px;
}
.image-1 {
/*使用url指定图片路径，由于demo是同级目录，默认从当前目录查找，可以直接输入文件名*/
background-image: url("bg.png");
}
</style>
<div></div>
展示结果如下，可以看到，默认会从元素左上角，向右、向下同时平铺图片。
需要注意一点：如果同时有background-image和border，border部分的背景是使用平铺部分填充的。做个测试，修改代码，添加边框样式
.image-1 {
/*使用url指定图片路径，由于demo是同级目录，默认从当前目录查找，可以直接输入文件名*/
background-image: url("bg.png");
border: 30px #000 dotted;
}
添加边框后，可以看到，完整图片的起点其实是在边框里边，边框是用平铺部分填充的。这一点会和后面要介绍的background-position很像。在background-origin小节还会后头看这个问题。
接下来的一些属性，也都是基于背景图片延伸的。
background-repeat
指定背景图片的平铺模式，可取值为：
repeat默认值，沿着水平(x轴)、垂直(y轴)进行平铺
repeat-x仅在水平(x轴)方向进行平铺
repeat-y仅在垂直(y轴)方向进行平铺
no-repeat不进行平铺
inherit继承父级
修改上段代码，添加background-repeat属性
.image-1 {
/*使用url指定图片路径，由于demo是同级目录，默认从当前目录查找，可以直接输入文件名*/
background-image: url("bg.png");
background-repeat: repeat-x;
}
展示效果如下，可以看到，只在水平(x轴)进行了平铺。
其他的属性值，可以挨个换上去看看展示的效果。
background-position
指定背景图片的起始位置，默认情况下，图片的左上角(0,0)会与元素的左上角(0,0)重合，可以通过该属性来产生偏移，也就是说让图片的左上角(0,0)与元素的指定位置重合。主要的取值有：
top、left、bottom、right、center的相邻组合值，比如top left表示左上，如果仅指定一个值，则第二个值默认为center
x% y%水平和垂直的百分比，左上角为0% 0%，右下角为100% 100%，如果仅指定一个值，则第二个值默认为50%
x y水平和垂直的坐标值，默认单位为px，如果仅指定一个值，则第二个值默认为50%
修改代码片段中的样式为：
.image-1 {
/*使用url指定图片路径，由于demo是同级目录，默认从当前目录查找，可以直接输入文件名*/
background-image: url("bg.png");
background-position: 20px 50px;
}
展示效果如下
可以看到，图片的左上角(0, 0)与元素的(20, 50)重合。
background-attachment
设置图片的滚动方式，当元素添加了背景图后，默认情况，背景图就会在元素的区域内固定，随着元素的滚动而滚动。可取值为：
scroll默认值，跟随元素滚动
fixed相对于浏览器的左上角进行定位，产生悬浮的效果(元素内容滚动，背景不动)
inherit继承父级
修改代码片段
<style>
.demo-image{
width: 500px;
height: 800px;
}
.image-1 {
/*使用url指定图片路径，由于demo是同级目录，默认从当前目录查找，可以直接输入文件名*/
background-image: url("bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
<div>
我是内容我是内容我是内容<br/><br/><br/><br/><br/>
我是内容我是内容我是内容<br/><br/><br/><br/><br/>
</div>
展示效果如下
background-clip
通过该属性可以设置背景图的渲染范围，图片的左上角(0,0)还是和元素重合，不产生偏移，使用剪切来实现。可取的值有：
border-box 背景被裁剪到边框区域，和默认的背景区域效果一致。
padding-box 背景被裁剪到内边距区域。
content-box 背景被裁剪到内容区域。
修改.image-1样式如下
.image-1 {
/*使用url指定图片路径，由于demo是同级目录，默认从当前目录查找，可以直接输入文件名*/
background-image: url("bg.png");
/*background-color: #015699;*/
background-repeat: no-repeat;
padding: 30px;
border: 30px#000 dotted;
background-clip: border-box;
}
然后切换background-clip的属性值，或者切换背景图为背景色，展示效果如下
background-origin
指定图片定位的参考位置，当设置背景图的时候，如果不指定background-position属性，则效果相当于background-position: 0 0，因为背景图的左上角(0,0)默认就是和元素的(0,0)重合。
在background-image小节，最后有提到一个background-image和border同时出现的问题，这里还得回头看下。
属性的可取值有：
padding-box默认值，背景图相对于内边距区域定位
border-box背景图相对于边框区域定位
content-box背景图相对于内容区域定位
修改样式如下
.image-1 {
/*使用url指定图片路径，由于demo是同级目录，默认从当前目录查找，可以直接输入文件名*/
background-image: url("bg.png");
/*background-repeat: no-repeat;*/
padding: 30px;
border: 30px #000 dotted;
background-origin: padding-box;
}
切换background-origin属性值，然后添加background-repeat属性，对比效果如下
比较background-origin和background-clip的效果，可以看出origin是移动背景图的左上角(0,0)来对齐，clip其实图片没动，直接裁剪掉了其他的部分。
background-size
设置背景图的尺寸，来使背景图更好的适应元素大小，可以取的值有：
x y直接指定背景图的宽度和高度，如果只设置一个值，则第二个值为auto
x% y%已父元素的百分比来设置背景图的宽度和高度，如果只设置一个值，则第二个值为auto
cover 等比例缩放背景图，使背景图完整填充元素的最大边。会造成背景图的部分超出元素区域。
contain 等比例缩放背景图，使背景图完整填充元素的最小边。背景图完整的显示在元素区域，元素区域会留有空白。
举个例子，假设有个元素的宽高是200 * 100，使用的背景图宽高是80 * 50。如果background-size: cover;则背景图会等比拉伸到200 * 125，背景图高度上会有超出元素。如果background-size: contain;则背景图会等比拉伸到160 * 100，元素在宽度上会留有空白区域。
修改示例代码，样式为：
.demo-image{
width: 500px;
height: 500px;
}
.image-1 {
/*使用url指定图片路径，由于demo是同级目录，默认从当前目录查找，可以直接输入文件名*/
/*背景图宽高：364 * 394*/
background-image: url("bg.png");
border: 10px #000 dotted;
background-repeat: no-repeat;
background-size: 500px 500px;
}
尝试修改样式中的background-size值，然后可以看到效果
background
在实际开发中建议使用background属性，该属性的值可组合使用上面介绍的一系列背景属性。
比如，需要设置图片背景，不平铺，则可以写为
.image-1 {
background: url("bg.png") no-repeat;
}
再例如，需要设置图片背景，不平铺，需要让背景图不随内容滚动，则可以写为
.image-1 {
background: url("bg.png") no-repeat fixed;
}
等等各种子属性的组合，大家可以在练习的时候多多尝试，加深理解。
关注公众号，回复”加入觅识帮“，识别群二维码，期待你的加入。
让我们共同相伴，开启软件知识之旅。
关注我们
