CSS attributes:
4. Color and Background attributes:
This section describes how to set the foreground color, background color, and image in CSS.
Color attribute:
The color attribute is used to set the foreground color of an element:
Property Name: 'color'
Attribute value: <color>
Initial value: depends on the initial value of the user.
Target objects: all elements
Inherit?: yes
Percentage remarks: Forbidden
The value of the color attribute can be a hexadecimal value, a color name recognized by the rgb () function, or CSS. For example:
EM {color: red}
EM {color: rgb (255, 0, 0 )}
Background attributes:
The background-color attribute is used to set the background color. The initial value is transparent:
Property Name: 'background-color'
Attribute value: <color> | transparent
Initial value: transparent
Target objects: all elements
Inherit?: no
Percentage remarks: Forbidden
The backgroud-image attribute is used to set the background image:
Property Name: 'background-image'
Attribute value: <url> | none
Initial value: none
Target objects: all elements
Inherit?: no
Percentage remarks: Forbidden
The url can be an absolute or relative address, for example:
BODY {background-image: url(marble.gif )}
P {background-image: none}
The preceding two attributes can also be implemented using common HTML attributes. The following attributes are CSS extensions to the original HTML.
The background-repeat attribute is used to describe the repeated arrangement of background images:
Property Name: 'background-repeat'
Attribute value: repeat | repeat-x | repeat-y | no-repeat
Initial value: repeat
Target objects: all elements
Inherit?: no
Percentage remarks: Forbidden
The meaning of the attribute value is:
Repeat: The image is repeatedly displayed along the x axis and y axis.
Repeat-x: repeat the image along the x axis.
Repeat-y: repeat the image along the y axis.
None: no duplicate images.
For example:
BODY {
Background: red url(pendant.gif );
Background-repeat: repeat-y;
}
/* Indicates repeating the image "pendant.gif" along the y axis, and the remaining part uses the red color as the background color */
The background-attachment attribute indicates how the background image is displayed when the entire document is scrolled. There are two attribute values: fixed and scroll. fixed is equivalent to the watermark effect in IE4. that is to say, when you drag a document, the background is relatively static, and scroll is rolled together with the document.
The background-position attribute is used to specify the position where the background image is displayed:
Property Name: 'background-position'
Attribute value: [<percentage >|< length>] {1, 2} | [top | center | bottom] | [left | center | right]