属性
| 值 |
说明 |
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 |
https://www.runoob.com/cssref/css3-pr-background.html
需要注意的是：
background-clip 指定的是 整个背景的绘画区域，而 background-origin 指定的是背景图片的区域位置（在背景绘画区里面），
且 background-color 背景颜色会充满整个背景区域。
background-color
| 值 |
描述 |
| color |
指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。 |
| transparent |
指定背景颜色应该是透明的。这是默认 |
| inherit |
指定背景颜色，应该从父元素继承 |
background-position
| 值 |
描述 |
| left top , left center , left bottom, right top, right center, right bottom, center top, center center, center bottom |
如果仅指定一个关键字，其他值将会是"center" |
| x% y% |
第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ |
| xpos ypos |
第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
| inherit |
指定background-position属性设置应该从父元素继承 |
background-size
图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
background-size: length|percentage|cover|contain; 默认 auto
| 值 |
描述 |
| length |
设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动) |
| percentage |
将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格 隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)" |
| cover |
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
| contain |
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
background-repeat
| 值 |
说明 |
| repeat |
背景图像将向垂直和水平方向重复。这是默认 |
| repeat-x |
只有水平位置会重复背景图像 |
| repeat-y |
只有垂直位置会重复背景图像 |
| no-repeat |
background-image 不会重复 |
| inherit |
指定 background-repeat 属性设置应该从父元素继承 |
background-origin
background-origin属性指定背景图片位于盒模型的哪个区域内， background-position就是相对与此来计算位置的。
注意如果背景图像background-attachment是"fixed"，这个属性没有任何效果。
| 值 |
描述 |
| padding-box |
背景图像位于填充框以内的区域，默认 |
| border-box |
背景图像位于边界框以内的区域 |
| content-box |
背景图像位于内容框以内的区域 |
background-clip
指定整个背景区域
background-clip: border-box|padding-box|content-box;
| 值 |
说明 |
| border-box |
默认值。背景绘制在边框方框内（剪切成边框方框）。 |
| padding-box |
背景绘制在衬距方框内（剪切成衬距方框）。 |
| content-box |
背景绘制在内容方框内（剪切成内容方框）。 |
background-attachment
| 值 |
描述 |
| scroll |
背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed |
背景图片不会随着页面的滚动而滚动。 |
| local |
背景图片会随着元素内容的滚动而滚动。 |
| initial |
设置该属性的默认值。 阅读关于 initial 内容 |
| inherit |
指定 background-attachment 的设置应该从父元素继承。阅读关于 inherit 内容 |
background-image
多个背景图使用逗号隔开
| 值 |
说明 |
| url('URL') |
图像的URL |
| none |
无图像背景会显示。这是默认 |
| linear-gradient() |
创建一个线性渐变的 "图像"(从上到下) |
| radial-gradient() |
用径向渐变创建 "图像"。 (center to edges) |
| repeating-linear-gradient() |
创建重复的线性渐变 "图像"。 |
| repeating-radial-gradient() |
创建重复的径向渐变 "图像" |
| inherit |
指定背景图像应该从父元素继承 |
/*多个背景，逗号隔开*/
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
例子
#example1 {
border: 10px dotted black;
padding:35px;
background-color: yellow;
background-image:url('https://static.runoob.com/images/mix/paper.gif');
background-origin: content-box;
background-repeat: no-repeat;
}
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
可见，背景颜色充满整个背景区域（border-box，默认），而背景图片位于 内容区（content-box）
