CSS的 background 属性怎么记得住呢？

（闲来无聊 练练英语）

The background shorthand CSS property sets all background style properties at once, such as color, image, orgin and size, or repeat method.

1. Values of properties

1. background-clip
2. background-origin
3. background-color
4. background-imge
5. background-position
6. background-repeat
7. background-size
8. background-attachment

As with all shorthand proerties, any omitted sub-values will be set to their initial value.

2. Syntax

For example:
background: value1 | value2 | …

1. The values can be palce in any order.

2. The background property is specified as one or more background layers, separated by commas.

3. Value

1. background-clip and background-origin

Refer to the big shot: Distinguish between background-clip and background-origin
summer:

properies	value	function
background-clip	border / padding / content	show
background-origin	border / padding / content	draw

注：background-clip ：指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

注：background-origin：指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了
（这两句还是用中文吧…！！！）

2. background-attachment

attachment = scroll | fixed | local

Refer to the big shot: background-attachment
summer:

value	function
fixed	Fixed relative to the viewport ( the background is not moving)
local	Fixed relative to the element’s contents
scroll	Fixed relative to the element itself and does not scroll with its contents

3. background-color

1. transparent（initial）
2. color
3. rgb( )
4. rgba( )
5. hsl( )
6. hsla( )

4. background-imge

notice: Usually there will be to void the gackground-image failing to be downloaded

background-image: url("../../media/examples/star.png"),
                  url("../../media/examples/lizard.png");

background-image: url("../../media/examples/lizard.png"),
                  url("../../media/examples/star.png");

Distinguish between the two pieces of code above:

1. 在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
2. if a specified image cannot be draw (for eaxmple, if the URI is wrong, ), browsers handle it as they would a none value

5. background-position

1. center
2. top / left / bottom / right （direction）
3. top left（two of directions）
4. percentage

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

6. background-repeat

monodrome（单值）	double-value（等价双值）	function
repeat	repeat repeat	The last one will be cropped
no-repeat	no-repeat no-repeat	only one imge
repeat-x	repeat no-repeat	Horizontal repeat
repeat-y	no-repeat repeat	vertical repeat
space	space space	The last one will not be cropped
round	round round	Add the space to contain the last image

7. background-size

value	function
length	Negative values are not allowed.
percentage	Negative values are not allowed. relative to the father box
auto	Scales the background image in the corresponding direction such that its intrinsic proportion
cover	Without cropping and stretching the image (scale accroding to the father’s width and height) ,there will no valuable space remains
contain	Without cropping and stretching the image (may be there will avaluable space)

final：
As expected, it’s still a little hard.
exercise