CSS中的backgroundbackground 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 co

CSS中的background

background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

设置元素背景颜色，transparent表示透明，如果设置了背景图片，则通过透明度改颜色也能影响到渲染

设置元素背景图片，可设置多个，也可以是渐变色。设置多个背景先设置的在上方。border会在它们之上，background-color会在他们之下。关于渐变，可参考Using CSS gradients - CSS: Cascading Style Sheets | MDN

定义背景元素的重复方式，可使用两个值分别表示x方向和y方向的重复方式。

值	说明
repeat	按需重复覆盖这个区域，多出部分会被裁剪
space	图片会尽可能重复，但是不会裁剪，第一个和最后一个会被固定在元素边上，空白会均匀分布，`background-position`属性会被忽略，如果图片太大还是会被剪裁
round	会拉伸或压缩图片填满空隙，由浏览器决定重复的次数
no-repeat	不重复，位置由`background-position`属性来决定

为每一个背景图片设置初始位置，这个位置是相对于由 background-origin 定义的位置图层的。值可以是：

关键字：top,bottom,left,right,center
x/y位置：可用百分比，长度等，百分比计算公式(contianer length - image length) * (position%) = (offset value)
距离边缘距离：left 50px bottom 100px; 表示距离左边50px及距离底边100px

设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。默认值auto 值可以是：

属性值	说明
auto	按比例缩放
contain	缩放背景图以完全装入背景区，不会拉伸，比例不一致的话可能有部分区域空白
cover	缩放背景图一完全覆盖背景区，不会拉伸，比例不一致的话可能部分背景在区域外

规定了指定背景图片background-image 属性的原点位置的背景相对区域。默认值padding-box，可设置两个值分别表示xy的参考值

设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

属性值	说明
border-box	背景延伸至边框外沿（但是在边框下层）
padding-box	背景延伸至内边距（padding）外沿。不会绘制到边框处
content-box	背景被裁剪至内容区（content box）外沿
text	背景被裁剪成文字的前景色

决定背景图像是在视图窗口内固定，或者随着包含它的区块滚动，默认值scroll

属性值	说明
fixed	表示背景相对于视图窗口固定，类似position: fixed的效果，`background-position`设置的是相对视图窗口的位置
local	表示背景相对于元素的内容固定，如果元素内部有滚动，则背景会随着元素一起滚动
scroll	此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动

语法较为随意

在每一层中，下列的值可以出现 0 次或 1 次：
- <attachment>
- <bg-image>
- <position>
- <bg-size>
- <repeat-style>
<bg-size> 只能紧接着 <position> 出现，以"/"分割，如： "center/80%".
<box> 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定 background-origin 和 background-clip。如果出现 2 次，第一次的出现设置 background-origin，第二次的出现设置 background-clip。
<background-color> 只能被包含在最后一层。