翻译源http://www.w3schools.com/css/css_background.asp
CSS背景属性用于定义元素的背景效果
用于背景效果的属性
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
background-color该属性指定一个元素的背景颜色。一个页面的背景色是定义在body选择器:
body {background-color:#b0c4de;}
例子:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a JW-COFFEE example.</p>
</body>
</html>
在CSS中,颜色通常是由以下3种指定方式:
- 一个十六进制值——像“# ff0000”
- 一个RGB值——像“RGB(255,0,0)”
- 一个颜色名称,如“red”
在下面的示例中,h1,p,和div元素有不同的背景颜色:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
例子
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
背景图像
background-image属性设置一个图像作为元素的背景。默认情况下,该图像可以重复显示,所以它可以覆盖整个元素。
以下例子是将整个页面背景设置为图像:
body {background-image:url('paper.gif');}
例子
<!DOCTYPE html>
<html>
<head>
<style>
body {background-image:url('paper.gif');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
注意,当你将一个图像设置为背景时,不要让图片喧宾夺主了内容。文字要可读可看哦~
背景图像——水平或垂直重复
默认情况下,background-image属性在水平方向和垂直方向重复一个图像。但是有些图片应该只水平重复或只垂直重复,否则就看起来很奇怪,像这样:
如果图像是只水平重复(repeat-x),背景会更好:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景图像-设置位置,不重复显示
注意:当使用背景图像时,不要让图像影响了文字通过background-repeat属性,设置仅显示一次图像
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
通过background-position属性设置图像位置
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景图像-速写属性
看了上面的例子,你发现使用图像时有许多属性要设置。为了简化代码,可以将所有的属性写成一个,叫做 速写属性。
简单“background”是这样写的
body {background:#ffffff url('img_tree.png') no-repeat right top;}
速写属性的顺序值是:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
补充:
我重新总结了背景属性表,希望你喜欢~^_^
请关注-----背景属性表