CSS background 属性详解

CSS background Property

语法：

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.

background-color

background-color

Default value: transparent

The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin)(包括内边距和边框).

background-position

The background-position property sets the starting position of a background image(背景图片的开始位置).

Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

background-size

The background-size property specifies the size of the background images.

语法：

background-size: auto|length|cover|contain|initial|inherit;

background-repeat

The background-repeat property sets if/how(背景图片的重复/循环方式) a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

background-origin

Default value: padding-box

The background-origin property specifies where the background image is positioned.

Note: If the background-attachment property is set to "fixed", this property has no effect.

background-origin: padding-box|border-box|content-box|initial|inherit;

background-clip

The background-clip property specifies the painting area of the background.

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

background-attachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

background-attachment: scroll|fixed|local|initial|inherit;