[Reprint] CSS background: Full parsing of css background attributes

CSS controls the background display of each element in html, including the background color, background image, repeated background, background positioning, and background Association. In CSS, you can use the background attribute to control these five items in a unified manner, or use the corresponding attributes to control these five items separately. The following describes the five attributes in CSS.

CSS background attributesYou can set the background color for all elements, from the body to inline elements such as em and. All background attributes cannot be inherited.

Background Color

The background-color attribute sets the background color for the element. This attribute accepts any valid color values.
The default value is transparent (transparent ). If a background color is not specified for an element, the background is transparent.

Div {background-color: red;} // its value can be a color name.
Div {background-color: # ff0000;} // it can also be a color code, # ff0000 can be abbreviated as # f00

Background Image

The background-image attribute uses a URL value to set the background image for the element.
The default value is none, indicating that no image is placed on the background.

Body {background-image: url (/54173 blog/04.gif);} // we usually specify a background image for the body.
P {background-image: url (/54173cn/04.gif);} // you can set the background-image attribute for all elements.
A. hot {background-image: url (/54173cn/04.gif);} // even inline elements (intra-row elements)

Duplicate background (tiled)

The background-repeat attribute sets whether or not the background image is repeated and how it is repeated. Its values include repeat, repeat-x (horizontal repetition), and repeat-y (vertical repetition) and no-repeat (not repeated ).
The default value is repeat, indicating that the background image is displayed both horizontally and vertically from the upper left corner of the element.

Body
{
Background-image: url (/54173 blog/03.gif); // background-repeat defines whether the background image is repeated. Therefore, set the background image first.
Background-repeat: repeat-x; // repeat-x, which is repeated in the horizontal direction.
}


Background Association

The background-attachment attribute sets whether the background image is moved as the webpage content scrolls. Its values are fixed (not moving) and scroll (moving as the content rolls ).
The default value is scroll. By default, the background will scroll with the document.

Body
{
Background-image: url(body_bg.gif); // This attribute is usually used to fix the background image of a webpage.
Background-attachment: fixed; // fixed. The page background image is not moved.
}


Background

The background-position attribute defines the position of an image in the background. You can precisely control the position of the background image to achieve the desired display effect.
The value can be a keyword: top, bottom, left, right, and center. It can also be an exact value such as 5 cm,-10px, or a percentage such as 50%.
The default value is top left (keyword), 0px 0px (value), and 0% 0% (Percentage). That is, the upper left corner of the default background image is aligned with the upper left corner of the element.

Keyword: the location keyword can appear in any order, and cannot exceed two (one corresponding to the horizontal direction and the other object vertical direction ). If only one keyword is displayed, the other keyword is considered as center. For example, background-position: top right;. The top of the background image is aligned with the top of the element, and the right of the background image is aligned with the right of the element, that is, they overlap in the upper right corner.

Value: the offset between the upper left corner of the background image and the upper left corner of the element. For example, background-position: 10px 10px; that is, the position of the upper left corner of the element is 10 pixels to the right, and the position of the Lower 10 pixels is the upper left corner of the background image. (It can be simply recorded as: Take the positive value, that is, the upper left corner of the background image is within the element range, and take the negative value, that is, the upper left corner of the background image is outside the element range .)

Percentage: The percentage value acts on both the element and the background image, for example, background-pisition: 40% 20%. It starts with the upper left corner, the horizontal 40% and vertical 20% of the background image are aligned with the horizontal 40% and vertical 20% of the element. If only one percentage value is specified, the provided value is used as the horizontal direction, and the vertical direction is assumed to be 50%.

 

Some beginners may feel a headache in calculating the location of the background image. In fact, this method is rarely used in percentages. For a value, you only need to remember that it represents the distance between the two upper left corner, from left to right, from top to bottom, and vice versa. (That is, a positive number indicates that the upper left corner of the background image is in the upper left corner of the element, and a negative number indicates that the upper left corner of the background image is in the upper left corner of the element .)

The order of writing in the other two directions is also easy to remember, as I remember: "First horizontal, then vertical ". Although the keyword method has no requirements on the order of the keywords in two directions, it is recommended to unify the "First horizontal, then vertical" and regard it as the only correct format, so that no error will be written in any case. In the production of webpages, we usually use px (pixels) as the unit of values ).

 

Among the preceding five CSS attributes, except for the background Association, the other four attributes are commonly used and must be mastered. Especially, the utilization of background-position is very high, for exampleCss spritesThe principle is to precisely set the background image position for different elements.

Abbreviated background attribute

In CSS, we can also abbreviated attributes to set all background attributes in a declaration. By setting the background attribute, we can directly define the above five attributes of the element without defining them separately. When defining a background attribute with multiple attribute values, pay attention to the writing sequence: color, image, repetition, association, and positioning.

Div {background: # f00 url (/54173 blog/bg.gif) no-repeat fixed center;} // when there are multiple attributes to define, pay attention to the writing order.
Div {background: url (/54173 blog/bg.gif) center;} // you can define only a few attributes.
Div {background: url (/54173 blog/bg.gif);} // or even

 

Article Reprinted from: http://www.54173.cn/blog? P = 292