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("/statics/images/course/img_flowers.jpg");
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，浏览器将使用无重复样式作为第二个值。
以下代码显示了如何使用 background-repeat 以使背景图像沿x轴重复。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
background-image: url("/statics/images/course/img_flowers.jpg");
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 |
您可以使用下面描述的与大小相关的属性来控制元素大小。width height 设置元素的宽度和高度。Value: auto or length or %min-wid...
响应式 Web 设计 - Viewport什么是 Viewport? viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。手机浏览器...
图片的居中显示 css 有很多方法，但在很多情况下有的方法无效，这是件很头疼的事情，比如一般设置图片属性text-align:center...
CSS 字体 CSS字体属性定义字体，加粗，大小，文字样式。serif 和 sans-serif 字体之间的区别在计算机屏幕上，sans-serif 字体被...
有很多刚刚接触 CSS 的新手有时会遇到 CSS 加载失败这个问题，但测试时，网页上没有显示该样式的问题，这就说明 CSS 加载失败了...
