CSS背景属性用于定义HTML元素的背景。

CSS属性定义背景效果:

背景颜色

背景图像

背景-重复

背景-附件

背景位置

背景颜色

背景色属性定义元素的背景色。

正文的选择器中使用了页面的背景色:

例子

body { background-color:# B0 C4 de；}

CSS中，颜色值通常以下列方式定义:

十六进制-如“#ff0000”

RGB——比如:“rgb(255，0，0)”

颜色-如“红色”

在下面的示例中，h1、p和div元素具有不同的背景色:

例子

h1 {背景色:# 6495ed}

p { background-color:# E0 ffff；}

div { background-color:# B0 C4 de；}

---

背景图像

属性描述元素的背景图像。

默认情况下，背景图像平铺并重复显示，以覆盖整个元素实体。

页面背景图片设置示例:

例子

body { background-image:URL(' paper . gif ')；}

试一试

下面是一个文字和背景图片组合不佳的例子。文本可读性差:

例子

body { background-image:URL(' BG desert . jpg ')；}

---

背景图像-水平或垂直平铺

默认情况下，background-image属性在页面上水平或垂直平铺。

如果一些图像水平和垂直平铺，看起来会不协调，如下所示:

例子

身体

{

背景-图像:URL(' gradient 2 . png ')；

}

如果图像只是水平平铺(重复-x)，页面背景会更好:

例子

身体

{

背景-图像:URL(' gradient 2 . png ')；

背景-重复:重复-x；

}

---

背景图像-设置定位和非平铺。

让背景图片不影响文字的排版。

如果不想平铺图像，可以使用background-repeat属性:

例子

身体

{

background-image:url('img_tree.png');背景-图像:URL(' img _ tree . png ')；

背景-重复:不重复；

}

在上面的例子中，背景图像和文本显示在相同的位置。为了使页面布局更加合理，不影响文字的阅读，我们可以改变图片的位置。

可以使用background-position属性来更改图像在背景中的位置:

例子

身体

{

background-image:url('img_tree.png');背景-图像:URL(' img _ tree . png ')；

背景-重复:不重复；

背景-位置:右上；

}

---

背景缩写属性

在上面的例子中，我们可以看到页面的背景色是由很多属性控制的。

为了简化这些属性的代码，我们可以将这些属性组合在同一个属性中。

颜色的简写属性是“背景”:

例子

body {background:#ffffff url('img_tree.png') no-repeat right top;}body { background:# ffffff URL(' img _ tree . png ')无重复右上；}

试一试

使用缩写属性时，属性值的顺序是:

背景颜色

背景图像

背景-重复

背景-附件

背景位置

不需要使用以上所有属性。您可以根据页面的实际需要来使用它们。

这个例子使用了前面介绍的CSS，可以查看对应的例子:CSS example。

更多示例

如何设置固定的背景图像

这个例子演示了如何设置一个固定的背景图像。图像不会随页面的其余部分一起滚动。

---

CSS背景属性

财产背景背景-附件背景颜色背景图像背景位置背景-重复

形容
缩写属性，用于在声明中设置背景属性。
背景是固定的还是与页面的其余部分一起滚动。
设置元素的背景色。
将图像设置为背景。
设置背景图像的起始位置。
设定是否以及如何重复背景图像。

如果你还是不明白，请在下面给我留言或者和我讨论QQ群308855039。让我们一起飞吧！