CSS background 属性详解
语法:
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
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;