本篇文章我们将一起展开来看css的background背景属性。

一、结构

创建DIV

<div class="div1">
	1
</div>

样式

width: 100px;
height: 200px;
font-size: 50px;
color: #fff;
background-color: #008000;

二、属性解析

1、background-color

顾名思义，这个属性是为盒子添加背景颜色，可以是rgb值，也可以是16进制颜色值，也可以是颜色英文单词

background-color: #008000 / #080 / green /rgb(0,0,0);

2、background-image

这个属性是为盒子添加背景图片，注意：图片链接可以使用引号包括，也可以直接写图片链接地址，可以是外链，可以是相对路径，可以是绝对路径

background-image: url(https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF);

3、background-repeat

属性设置是否及如何重复背景图像。默认repeat，背景图像在水平和垂直方向上重复。

JS设置方式：object.style.backgroundRepeat="repeat-y"

值	说明
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

4、background-position

属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。
JS设置方式：object.style.backgroundPosition="center"

值	说明
top left ； top center；top right；center left；center center；center right；bottom left；bottom center；bottom right	如果您仅规定了一个关键词，那么第个值将是"center"，默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

5、background-size

规定背景图像的尺寸：

div{
	background:url(XXX);
	background-size:80px 60px;
	background-repeat:no-repeat;
}

值	说明
x,y	第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
a%, b%	父元素的百分比来设置背景图像的宽度和高度 ,第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意：背景图像的某些部分也许无法显示在背景定位区域中
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

6、background-clip

规定背景的绘制区域：

background-clip: border-box|padding-box|content-box;

值	说明
border-box	默认值，背景被裁剪到边框盒 ，背景会出现在border边框的下边
padding-box	背景被裁剪到内边距框。border边框不加背景
content-box	背景被裁剪到内容框， 只在内容区添加背景

7、background-origin

相对于内容框来定位背景图像，即：背景图片的偏移量计算的原点

值	说明
border-box	背景图像相对于边框盒来定位
padding-box	背景图像相对于内边距框来定位。
content-box	背景图像相对于内容框来定位。

8、background-attachment

背景图片是否跟随元素移动

值	描述
scroll	默认值，背景图片会跟随元素移动
fixed	背景会固定在页面中，不会随元素移动

9、background

这一个属性可以同时设置上述所有属性，并且没有先后顺序
注意：
1、background-size 必须写在background-position的后边，并且使用/隔开
2、background-origin 必须写在background-clip的前边

值	描述	css版本
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1