CSS allows you to apply a solid color as a background, and also allows you to create quite complex effects using a background image.
Solid Color background background image
body{
Background: #ff0000 URL (/i/eg_bg_03.gif) no-repeat Fixed Center;
}
1, solid color background: Background-color
Body { background-color:yellow; } H1 { background-color:#00ff00; } P { background-color:rgb (255,0,255); }
Range of element backgrounds
The Background-color property sets a solid color for the element. This color fills the element's content, padding, and border areas, extending to the outer bounds of the element's border (but excluding margins). If the border has a transparent part (such as a dashed border), the background color is displayed through these transparent sections
<HTML><Head><styletype= "Text/css">Body{Background-color:Yellow}H1{Background-color:#00ff00}H2{Background-color:Transparent}P{Background-color:RGB (250,0,255)}P.no2{Background-color:Gray;padding:20px;}P.no2{Background-color:Gray;padding:20px;margin:20px;Border:4px Red dotted;}</style></Head><Body><H1>This is Heading 1.</H1><H2>This is Heading 2.</H2><P>This is the paragraph</P><Pclass= "NO2">This paragraph sets the inner margin.</P><Pclass= "NO3">The Background-color property sets a solid color for the element. This color fills the element's content, padding, and border areas, extending to the outer bounds of the element's border (but excluding margins). If the border has a transparent part (such as a dashed border), the background color is displayed through these transparent sections</P>
</Body></HTML>
Possible values
value |
Description |
Color_name |
Specifies the color value as the background color for the color name (such as red). |
Hex_number |
Specifies the background color (such as #ff0000) for which the color value is a hexadecimal value. |
Rgb_number |
Specifies that the color value is the background color of the RGB code (such as RGB (255,0,0)). |
Transparent |
Default. The background color is transparent. |
Inherit |
Specifies that the settings for the Background-color property should be inherited from the parent element. |
2 Background image
Body {background-image:url (/i/eg_bg_04.gif);}
A:background-repeat Tile
Background-repeat:repeat;
HTML DOM
document.body.style.backgroundrepeat= "Repeat-y";
body{ Background-image: URL (/i/eg_bg_03.gif); Background-repeat: no-repeat } |
Body { Background-image: URL (/i/eg_bg_03.gif); Background-repeat: repeat-x } |
Body { Background-image: URL (/i/eg_bg_03.gif); Background-repeat: repeat-y } |
|
|
|
B: Background positioning: background-position
p{ background-image:url (' bgimg.gif '); background-repeat:no-repeat; background-position:top;// 关键字
}
The following are the equivalent position keywords:
single key word |
the equivalent keyword |
Center |
Center Center |
Top |
Top Center or center top |
Bottom |
Bottom Center or center bottom |
Right |
Right Center or center right |
Left |
Left Center or center left |
Body {background-image:url ('/i/eg_bg_03.gif ');
Background-repeat:no-repeat;
background-position:50% 50%;//百分数值
}
Body { background-image:url ('/i/eg_bg_03.gif '); background-repeat:no-repeat; background-position:50px 100px;//长度值
}
C: Background correlationbackground-attachment: fixed;
Possible values
value |
Description |
Scroll |
The default value. The background image moves as you scroll through the rest of the page. |
Fixed |
The background image does not move when the rest of the page scrolls. |
Inherit |
Specifies that the settings for the Background-attachment property should be inherited from the parent element. |
HTMLDOM :document.body.style.backgroundAttachment="fixed";
CSS Background Properties Learn about