船长 发表于 2009-06-02 10:27 | 分类：css | 阅读数：530 次
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
This example demonstrates 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>
背景图片水平重复 How to repeat a background image only horizontally
This example demonstrates 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
This example demonstrates 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
This example demonstrates how to place the image on the page.
实例：
<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
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.
实例：
<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
This example demonstrates how to use the shorthand property for setting all of 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>
