给网页添加背景色
CSS允许我们为网页元素设置背景色，可以使用`background-color`属性来实现。这个属性可以接受任何合法的颜色值。例如，下面的规则将一个段落的背景设置为灰色：
```
p {
background-color: gray;
}
```
如果希望背景色从元素中的文本向外延伸一些，只需增加一些内边距即可：
```
p {
background-color: gray;
padding: 20px;
}
```
我们甚至可以为所有元素设置背景色，包括`body`、`em`和行内元素`a`。
给网页添加背景图像
如果想要在网页背景中放置一张图像，可以使用`background-image`属性。默认情况下，`background-image`属性的值是`none`，表示没有设置任何背景图像。如果需要设置背景图像，必须为该属性提供一个URL值。例如，下面的规则将`body`元素的背景图像设置为一个URL链接指向的图像：
```
body {
background-image: url(/i/eg_bg_);
}
```
大多数时候，我们将背景应用到`body`元素上，但也可以将背景应用到其他元素上。例如，下面的规则为一个段落应用了一个背景图像，而不会对文档的其他部分应用背景：
```
p.flower {
background-image: url(/i/eg_bg_);
}
```
我们甚至可以为行内元素设置背景图像。例如，下面的规则为一个链接设置了背景图像：
```
{
background-image: url(/i/eg_bg_);
}
```
控制背景图像的重复
如果需要在页面上平铺背景图像，可以使用`background-repeat`属性。属性值`repeat`表示图像在水平和垂直方向上都进行平铺，与以往的背景图像默认行为相同。`repeat-x`和`repeat-y`分别表示图像只在水平或垂直方向上重复，`no-repeat`表示不允许图像在任何方向上平铺。例如，下面的规则将`body`元素的背景图像在垂直方向上进行平铺：
```
body {
background-image: url(/i/eg_bg_);
background-repeat: repeat-y;
}
```
调整背景图像的位置
我们可以利用`background-position`属性来改变背景图像在元素中的位置。例如，下面的规则将`body`元素的背景图像居中放置：
```
body {
background-image:url('/i/eg_bg_');
background-repeat:no-repeat;
background-position:center;
}
```
`background-position`属性可以接受多种值。我们可以使用关键字如`top`、`bottom`、`left`、`right`和`center`，这些关键字通常是成对出现的，但并不总是必须成对。我们还可以使用长度值，如`100px`或`5cm`，以及百分数值。不同类型的值对于背景图像的放置会稍有差异。
防止背景图像滚动
当文档比较长时，当页面向下滚动时，背景图像也会随之滚动。如果希望背景图像固定不动，可以使用`background-attachment`属性来实现。通过将该属性设置为`fixed`，可以使图像相对于可视区域固定，而不会受到滚动的影响。例如，下面的规则将`body`元素的背景图像固定在页面上：
```
body {
background-image:url(/i/eg_bg_);
background-repeat:no-repeat;
background-attachment:fixed;
}
```
CSS背景属性
- `background`：这是一个简写属性，用于在一个声明中设置所有背景属性。
- `background-attachment`：控制背景图像是否固定或随页面滚动。
- `background-color`：设置元素的背景颜色。
- `background-image`：将图像设置为背景。
- `background-position`：设置背景图像的起始位置。
- `background-repeat`：设置背景图像是否及如何重复。
以上就是给网页添加背景色和背景图像的方法，通过调整背景图像的重复和位置，我们可以创建出独特而丰富的页面背景效果。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
