CSS 背景
在下面的列表中描述了为背景设置样式的属性。
background-color
设置元素的背景颜色。
颜色在任何图像后面绘制。background-image
设置元素的背景图像。
如果指定了多个图像，则每个后续图像都绘制在其前面的图像之后。background-repeat
设置图像的重复样式。background-size
设置背景图像的大小。background-position
定位背景图像。background-attachment
设置具有视口的元素中的图像的附件样式。background-clip
指定图像的剪裁样式。background-origin
定位背景图像。background
简写元素。
背景颜色
我们可以使用 background-color 设置背景颜色。
以下代码设置背景颜色。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background-color: lightgray;
}
</style>
</head>
<body>
<p>This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
</p>
</body>
</html>背景图像
我们可以使用 background-image 设置背景图像。
以下代码设置背景图像。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background-image: url(http://www.www.w3cschool.cn/style/download.png);
background-size: 20px 20px;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
</p>
</body>
</html>z-index属性的默认值为零。
背景重复
我们可以使用 background-repeat 属性控制图像将如何覆盖整个背景区域。
background-repeat 的允许值在下面的列表中描述。
repeat-x - 水平重复图像; 图像可能会碎片化。
repeat-y - 垂直重复图像; 图像可能会碎片化。
repeat - 在两个方向重复图像; 图像可能会碎片化。
space - 图像被重复以填充空间而不产生碎片，并且剩余区域被均匀地分配在图像周围。
round - 图像被缩放，以便它可以重复而不创建碎片。
no-repeat - 图像不重复。
您可以为水平和垂直重复设置值，但如果您只提供一个值，浏览器将在两个方向使用该重复样式。
但对于repeat-x和repeat-y，浏览器将使用无重复样式作为第二个值。
以下代码显示了如何使用 background-repeat 以使背景图像沿x轴重复。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background-image: url(http://www.www.w3cschool.cn/style/download.png);
background-size: 20px 20px;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
</p>
</body>
</html>图像在元素上水平重复。
相关属性
| 属性 | 描述 | CSS |
|---|---|---|
| background-attachment | 修复或滚动背景图像与页面的其余部分 | 1 |
| background-clip | 设置背景的绘制区域 | 3 |
| background-color | 设置背景颜色 | 1 |
| background-image | 设置背景图像 | 1 |
| background-origin | 设置背景图像的定位区域 | 3 |
| background-position | 设置背景图像的起始位置 | 1 |
| background-repeat | 如何重复背景图像 | 1 |
| background-size | 设置背景图像的大小 | 3 |
| background | 背景属性在一个声明 | 1 |
在下面的列表中描述了为背景设置样式的属性。
background-color
设置元素的背景颜色。
颜色在任何图像后面绘制。background-image
设置元素的背景图像。
如果指定了多个图像，则每个后续图像都绘制在其前面的图像之后。background-repeat
设置图像的重复样式。background-size
设置背景图像的大小。background-position
定位背景图像。background-attachment
设置具有视口的元素中的图像的附件样式。background-clip
指定图像的剪裁样式。background-origin
定位背景图像。background
简写元素。
背景颜色
我们可以使用 background-color 设置背景颜色。
以下代码设置背景颜色。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background-color: lightgray;
}
</style>
</head>
<body>
<p>This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
This is a test.<br/ >
</p>
</body>
</html>背景图像
我们可以使用 background-image 设置背景图像。
以下代码设置背景图像。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background-image: url(http://www.www.w3cschool.cn/style/download.png);
background-size: 20px 20px;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
</p>
</body>
</html>z-index属性的默认值为零。
背景重复
我们可以使用 background-repeat 属性控制图像将如何覆盖整个背景区域。
background-repeat 的允许值在下面的列表中描述。
repeat-x - 水平重复图像; 图像可能会碎片化。
repeat-y - 垂直重复图像; 图像可能会碎片化。
repeat - 在两个方向重复图像; 图像可能会碎片化。
space - 图像被重复以填充空间而不产生碎片，并且剩余区域被均匀地分配在图像周围。
round - 图像被缩放，以便它可以重复而不创建碎片。
no-repeat - 图像不重复。
您可以为水平和垂直重复设置值，但如果您只提供一个值，浏览器将在两个方向使用该重复样式。
但对于repeat-x和repeat-y，浏览器将使用无重复样式作为第二个值。
以下代码显示了如何使用 background-repeat 以使背景图像沿x轴重复。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background-image: url(http://www.www.w3cschool.cn/style/download.png);
background-size: 20px 20px;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
</p>
</body>
</html>图像在元素上水平重复。
相关属性
| 属性 | 描述 | CSS |
|---|---|---|
| background-attachment | 修复或滚动背景图像与页面的其余部分 | 1 |
| background-clip | 设置背景的绘制区域 | 3 |
| background-color | 设置背景颜色 | 1 |
| background-image | 设置背景图像 | 1 |
| background-origin | 设置背景图像的定位区域 | 3 |
| background-position | 设置背景图像的起始位置 | 1 |
| background-repeat | 如何重复背景图像 | 1 |
| background-size | 设置背景图像的大小 | 3 |
| background | 背景属性在一个声明 | 1 |