CSS 简明教程 - 背景属性 - 简单教程，简单编程

CSS background 属性用于定义 HTML 元素的背景效果，我们可以在 CSS 中设置背景色和背景图片

常见的 CSS 背景属性如下

属性	说明
background-color	设置背景颜色
background-image	设置背景图片
background-repeat	设置背景图片的重复模式
background-attachment	设置背景图片是否会跟随页面滚动
background-position	设置背景图片的位置

背景颜色 `background-color`

我们可以使用 background-color 属性设置 HTML 元素的背景颜色

以下 CSS 代码会将  元素的背景颜色设置为灰色

p {
    background-color: gray;
}

在 CSS 中，可以通过以下方式指定颜色值

一个可用的颜色名称，例如 red
一个十六进制值，例如 #ff0000
一个 RGB 颜色值，例如 rgb(255,0,0)

更多可用的颜色值，可以访问 CSS 参考手册:CSS 颜色

背景颜色不能继承，其默认值是透明的 transparent;，如果元素未指定背景颜色，则背景是透明的，相当于做了如下设置

* { 
    background-color: transparent;
}

背景图片 `background-image`

background-image 属性可以指定一张图片作为 HTML 元素的背景，background-image 属性的默认值为none，表示没有为背景指定任何图片

默认情况下，会重复显示背景图像以覆盖整个元素的空间

如果需要为 HTML 元素设置背景图像，则必须为 background-image 属性设置 URL 值，也就是图片可以访问的地址

body {
    background-image: url(/i/eg_bg_04.gif);
}

虽然绝大多数背景图像应用于 <body> 元素，但不限于此

在以下示例中，背景图像应用于 class 包含了 flower 类的段落 ，但文档的其余部分，包括其它  元素则不应用背景效果

p.flower {
    background-image: url(/i/eg_bg_03.gif);
}

甚至可以为内联元素设置背景图像，下面的示例中，我们为链接 <a> 设置了背景图像

a.radio {
    background-image: url(/i/eg_bg_07.gif);
}

注意：应用背景图像时，不应使图像干扰元素中的文本

背景图片填充模式 `background-repeat`

我们可以使用 background-repeat 属性来指定如何在元素中填充背景图像，可选的值有以下几个

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	`background-image`不会重复
inherit	指定 `background-repea` 属性设置应该从父元素继承

当一些背景图像水平和垂直地重复填充时，元素的背景可能看起来非常不协调，例如

body {
    background-image:url('gradient2.png');
}

但是，如果背景图像仅水平填充，则页面看起来很漂亮，例如

body {
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
}

背景图片位置 `background-position`

我们可以使用 background-position 属性来指定背景图像在元素中的位置

下面的 CSS 代码设置 <body> 元素的背景出于居中位置 ( 垂直居中和水平居中 )

body {
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
}

background-position 的属性值有三种类型

关键字，可选的值有 top 、bottom 、right 、left 、center，分别表示顶部，底部，靠左，靠右和居中对齐
长度单位，例如 100px 或 5cm
百分比，例如 50% 表示居中，100% 表示底部或靠右

background-position 的属性值可以设置一个，也可以设置两个，当设置一个时，第二个默认为 center，用于表示 x 轴的位置和 y 轴的位置

对了，忘记说了，背景位置的原点为左上角，也就是左上角为 0 0 或 0% 0% 或 top left

关键字

只要关键字不超过两个，背景位置关键字就可以按任意顺序出现，一个用于水平，另一个用于垂直

如果你希望背景图像仅出现在  元素的左上角，可以像这样定义 CSS 代码

p {
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top left;
}

如果你希望背景图像在  元素中居中位置，可以像这样定义 CSS 代码

p {
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:center center;
}

因为第二个值默认为 center ，所以也可以如下设置

p {
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:center;
}

长度值

如果 background-position 属性值是长度值，则需要指定 x 方向偏移值和 y 方向偏移值，这两个值需要用空格分隔，例如，background-position：12px 24px 表示 x 方向偏移值为 12px ，y 方向偏移值为 24px

下面的代码是一个完整的示例

body {
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
}

固定背景图片 `background-attachment`

如果文档很长，则背景图像会在文档向下滚动时跟随滚动，当文档滚动的距离超过了图片时，图片就会消失

我们可以使用 background-attachment 属性禁止背景图像与文档一起滚动，为了达到此目的，我们可以设置background-attachment属性设置为 fixed

body {
    background-image: url(/i/eg_bg_02.gif);
    background-repeat: no-repeat;
    background-attachment: fixed
}

CSS 背景属性 - 简写属性

上面的示例中，我们尝试了很多 CSS 背景属性来设置 HTML 元素的背景，为了简化 CSS 代码，我们可以将这些属性组合到一个属性中 background，例如

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

当使用简写属性，属性值的顺序为:

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

如果其中之一属性缺失时，剩余的属性值仍按此顺序排列

CSS 简明教程 - 背景属性

背景颜色 background-color

背景图片 background-image

背景图片填充模式 background-repeat

背景图片位置 background-position

关键字

长度值

固定背景图片 background-attachment