The CSS background properties define the background effects of an element.
CSS的background属性可为元素定义背景效果。

设置背景颜色 Set the background color
下面的举例说明如何给一个对象设置背景。This example demonstrates how to set the background color for an element.
以下是示例代码:
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<p>段落</p>
</body>
</html>
设置背景图片 Set an image as the background
这个例子说明如何将图片设为背景。This example demonstrates how to set an image as the background
以下是示例代码:
<html>
<head>
<style type="text/css">
body
{
background-image:url('attachments/month_0612/52006129151936.jpg')
}
</style>
</head>
<body>
</body>
</html>
重复背景图片 How to repeat a background image
以下是示例代码:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('attachments/month_0612/52006129151936.jpg');
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>
背景图片水平重复 How to repeat a background image only horizontally
以下是示例代码:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('attachments/month_0612/52006129151936.jpg');
background-repeat: repeat-x
}
</style>
</head>
<body>
</body>
</html>
背景图片垂直重复 How to repeat a background image only vertically
以下是示例代码:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('attachments/month_0612/52006129151936.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
如何放置背景图片 How to place the background image
以下是示例代码:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('attachments/month_0612/52006129151936.jpg');
background-repeat:
no-repeat;
background-position:
 center;
}
</style>
</head>
<body>
</body>
</html>
背景图片固定在背景上,不跟随页面一起移动 How to set a fixed background image

以下是示例代码:
<html>
<head>
<style type="text/css">
body
{
background-image:
url('attachments/month_0612/52006129151936.jpg');
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
<p>图片将不随页面滚动</p>
</body>
</html>
一句声明就能设置所有与background属性有关的值 All the background properties in one declaration
以下是示例代码:
<html>
<head>
<style type="text/css">
body
{
background: #00ff00 url('attachments/month_0612/52006129151936.jpg') no-repeat fixed center;
}
</style>
</head>
<body>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
<p>背景颜色</p>
</body>
</html>