css background

来自MDN
background简写属性顺序一直很困扰，特整理汇总
（同样困扰的还有font属性）

0. background

此属性是一个简写属性，可以在一次声明中定义一个或多个属性：
background-clip、
background-color、
background-image、
background-origin、
background-position、
background-repeat、
background-size，
background-attachment。
对于所有简写属性，任何没有被指定的值都会被设定为它们的初始值。

background 属性被指定多个背景层时，使用逗号分隔每个背景层。

每一层的语法如下：
1. 在每一层中，下列的值可以出现 0 次或 1 次：
	<attachment>
	<bg-image>
	<position>
	<bg-size>
	<repeat-style>
2. <bg-size> 只能紧接着 <position> 出现，以"/"分割，如： "center/80%".
3. <box> 可能出现 0 次、1 次或 2 次。
	如果出现 1 次，它同时设定 background-origin 和 background-clip。
	如果出现 2 次，第一次的出现设置 background-origin，
		第二次的出现设置background-clip。
4. <background-color> 只能被包含在最后一层。
	注意: background-color 只能在background的最后一个属性上定义，
		  因为整个元素只有一种背景颜色。

下面的一个或多个值，可以按任意顺序放置：
<attachment>
参见 background-attachment
<box>
参见 background-clip 和 background-origin
<background-color>
参见 background-color
<bg-image>
参见 background-image
<position>
参见 background-position
<repeat-style>
参见 background-repeat
<bg-size>
参见 background-size。

1. background-position 背景位置

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

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center; 
关键字 center，用来居中背景图片
关键字 top, left, bottom, right 中的一个。用来指定把这个项目（原文为 item）放在哪一个边缘。另一个维度被设置成 50%，所以这个项目（原文为 item）被放在指定边缘的中间位置。

/* <percentage> values */
background-position: 25% 75%;
另外需要注意，如果背景图片的大小和容器一样，那设置百分比的值将永远无效，因为“容器和图片的差”为0（图片永远填满容器，并且图片的相对位置和容器的相对位置永远重合）。在这种情况下，需要为偏移使用绝对值（例如px）。

至于百分比：
百分比值的偏移指定图片的相对位置和容器的相对位置重合。
值0%代表图片的左边界（或上边界）和容器的左边界（上边界）重合。
值100%代表图片的右边界（或下边界）和容器的右边界（或下边界）重合。
值50%则代表图片的中点和容器的中点重合。

当指定百分比值的时候，实际上执行了以下的计算公式（该公式可以用数学方式定义图片和容器相对位置重合）：
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

使用X坐标来举个例子，假设有一个300px宽的图片，将这个图片使用到一个100px宽的容器中，并且将background-size设置成自动：
100px - 300px = -200px (容器和图片的宽度差)
当对background-position设置值依次为-25%，0%，50%，100%，125%，得到图片相对容器的偏移值为：
-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
<length> 或 <percentage>。指定相对于左边缘的 x 坐标，y 坐标被设置成 50%。
    
/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset; 

background-position 属性被指定为一个或多个 <position> 值，用逗号隔开。

2.background-size 背景大小（尺寸）

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

初始值	auto auto
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	否
/
* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

注意：没有被背景图片覆盖的背景区域仍然会显示用background-color属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

属性值
<length>
<length> 值，指定背景图片大小，不能为负值。
<percentage>
<percentage> 值，指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。
auto
以背景图片的比例缩放背景图片。
cover
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。
contain
缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。
位图一定有固有尺寸与固有比例，矢量图可能两者都有，也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。

背景图片大小计算：

如果指定了 background-size 的两个值并且不是auto：
背景图片按指定大小渲染。
contain 或 cover:
保留固有比例，最大的包含或覆盖背景区。如果图像没有固有比例，则按背景区大小。
auto 或 auto auto:
图像如果有两个长度，则按这个尺寸。如果没有固有尺寸与固有比例，则按背景区的大小。如果没有固有尺寸但是有固有比例， 效果同 contain。如果有一个长度与比例，则由此长度与比例计算大小。如果有一个长度但是没有比例，则使用此长度与背景区相应的长度。
一个为 auto 另一个不是auto:
如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值与固有比例计算。如果图像没有固有比例，则指定的长度使用指定值，未指定的长度使用图像相应的固有长度，若没有固有长度，则使用背景区相应的长度。

1. background-origin 背景原点

background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域.
注意：当使用 background-attachment 为fixed时，该属性将被忽略不起作用。

初始值	padding-box
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	否

background-origin: border-box 背景图片的摆放以border区域为参考
background-origin: padding-box 背景图片的摆放以padding区域为参考
background-origin: content-box 背景图片的摆放以content区域为参考

background-origin: inherit

2. background-clip 背景裁剪

背景裁剪：设置元素的背景（背景图片或颜色）是否延伸到边框下面。
```css
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

background-clip: text;
-webkit-background-clip: text;
color: transparent;
```

3. background-color 背景颜色

CSS属性中的 background-color 会设置元素的背景色, 
属性的值为颜色值或关键字"transparent"二者选其一.

初始值	transparent
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	否

/* Keyword values */
background-color: red;

/* Hexadecimal value */
background-color: #bbff00;

/* RGB value */
background-color: rgb(255, 255, 128);

/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);

/* Special keyword values */
background-color: currentColor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

4. background-image 背景图片

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。
多背景设置，背景之间以逗号隔开.

在绘制时，图像以 z 方向堆叠的方式进行。
1. 先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
2. 然后元素的边框 border 会在它们之上被绘制，
3. 而 background-color 会在它们之下绘制。

*注意： 
即使图像是不透明的，背景色在通常情况下并不会被显示，web开发者仍然应该指定 
background-color 属性。如果图像无法被加载—例如，
在网络连接断开的情况下—背景色就会被绘制

图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性background-clip 和 background-origin 中定义。
如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。

background-image:
  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');

7.background-repeat 背景重复

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

eat	
图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.

space	
图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.

round	
随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.

译者注: 关键是浏览器怎么计算什么时候应该添加一个图像进来, 而不是继续伸展.

no-repeat	
图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由background-position属性来决定.

8. background attachment 背景附着

background-attachment CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。

/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

fixed
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local
此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll
此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）

此属性支持多张背景图片。你可以用逗号分隔来为每一张背景图片指定不同的<attachment>。每一张背景图片顺序对应相应的attachment 类型。