CSS背景

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

CSS背景属性有:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

背景颜色

background-color 属性指定元素的背景色。

一个页面的背景颜色设置想这样：

body {
    background-color: lightblue;
}

让我试试

使用 CSS, 颜色经常由如下方式指定:

一个有效的颜色名称 - 像 "red" 一个十六进制值 - 像 "#ff0000" 一个RGB值 - 像 "rgb(255,0,0)"

在下面的例子中, <h1>, <p>, 和 <div> 元素有不同的背景颜色:

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

让我试试

背景图

background-image 属性用作元素背景的图像。

默认情况下，图像重复，所以它覆盖整个元素.

一个页面的背景图像可以这样设置:

body {
    background-image: url("paper.gif");
}

让我试试

下面是一个文本和背景图像的不良组合的例子。文本几乎不可读:

body {
    background-image: url("bgdesert.jpg");
}

让我试试

注意：当使用背景图像时，使用不干扰文本的图像。

背景图像-水平或垂直重复

默认情况下，背景图像background-image属性水平和垂直重复图像。

些图像应该仅水平或垂直重复，否则他们会看起来奇怪，像这样：

body {
    background-image: url("gradient_bg.png");
}

让我试试

如果以上的重复图像仅水平重复（背景重复：repeat-x；），背景会更好看：

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

让我试试

提示：垂直重复图像，设置 background-repeat: repeat-y;

背景图像-设置位置，不重复

显示背景图像只有一次使用background-repeat属性设定:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

让我试试

在上面的示例中，背景图像与文本显示在同一位置.。我们可以改变图片的位置，这样就不会干扰文字太多。

图像的位置由background-position属性设置:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

让我试试

背景图像-固定位置

指定背景图像是固定的（不会滚动页面的其余部分）, 使用background-attachment属性:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

让我试试

背景-速记属性

若要缩短代码，也可以在一个属性中指定所有背景属性。这被称为速记属性。

背景的简写属性如下:

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

让我试试

使用简写属性时，属性值的顺序为：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

如果其中一个属性值丢失，只要其他的值都在这个顺序，则不重要

所有的CSS背景属性