# CSS 背景
**CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。**
**CSS 在这方面的能力远远在 HTML 之上。**
## 背景色
可以使用 [background-color 属性](/cssref/pr_background-color.asp "CSS background-color 属性")为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：
```
p {background-color: gray;}
```
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
```
p {background-color: gray; padding: 20px;}
```
如需查看本例的效果，可以！
可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。
background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
## 背景图像
要把图像放入背景，需要使用 [background-image 属性](/cssref/pr_background-image.asp "CSS background-image 属性")。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
```
body {background-image: url(img/eg_bg_04.gif);}
```
大多数背景都应用到 body 元素，不过并不仅限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：
```
p.flower {background-image: url(img/eg_bg_03.gif);}
```
您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
```
a.radio {background-image: url(img/eg_bg_07.gif);}
```
如需查看上述例子的效果，可以！
理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。
另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。
## 背景重复
如果需要在页面上对背景图像进行平铺，可以使用 [background-repeat 属性](/cssref/pr_background-repeat.asp "CSS background-repeat 属性")。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
```
body
{
background-image: url(img/eg_bg_03.gif);
background-repeat: repeat-y;
}
```
如需查看上例的效果，可以。
## 背景定位
可以利用 [background-position 属性](/cssref/pr_background-position.asp)改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
```
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
```
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
### 关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：
```
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
```
下面是等价的位置关键字：
| 单一关键字 | 等价的关键字 |
| --- | --- |
| center | center center |
| top | top center 或 center top |
| bottom | bottom center 或 center bottom |
| right | right center 或 center right |
| left | left center 或 center left |
### 百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：
```
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
```
这会导致图像适当放置，其中心与其元素的中心对齐。**换句话说，百分数值同时应用于元素和图像。**也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：
```
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
```
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。
### 长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
```
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
```
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
## 背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 [background-attachment 属性](/cssref/pr_background-attachment.asp "CSS background-attachment 属性")防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
```
body
{
background-image:url(img/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
```
如需查看上例的效果，可以。
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。
## CSS 背景实例
[设置背景颜色](/tiy/t.asp?f=csse_background-color)
[设置文本的背景颜色](/tiy/t.asp?f=csse_text_background)
[将图像设置为背景](/tiy/t.asp?f=csse_background-image)
[将图像设置为背景 2](/tiy/t.asp?f=csse_background-image_2)
[如何重复背景图像](/tiy/t.asp?f=csse_background-repeat)
[如何在垂直方向重复背景图像](/tiy/t.asp?f=csse_background-repeaty)
[如何在水平方向重复背景图像](/tiy/t.asp?f=csse_background-repeatx)
[如何仅显示一次背景图像](/tiy/t.asp?f=csse_background-repeat_no-repeat)
[如何放置背景图像](/tiy/t.asp?f=csse_background-position)
[如何使用%来定位背景图像](/tiy/t.asp?f=csse_background-position_percent)
[如何使用像素来定位背景图像](/tiy/t.asp?f=csse_background-position_pixel)
[如何设置固定的背景图像](/tiy/t.asp?f=csse_background-attachment)
[所有背景属性在一个声明之中](/tiy/t.asp?f=csse_background)
## CSS 背景属性
| 属性 | 描述 |
| --- | --- |
| [background](/cssref/pr_background.asp "CSS background 属性") | 简写属性，作用是将背景属性设置在一个声明中。 |
| [background-attachment](/cssref/pr_background-attachment.asp "CSS background-attachment 属性") | 背景图像是否固定或者随着页面的其余部分滚动。 |
| [background-color](/cssref/pr_background-color.asp "CSS background-color 属性") | 设置元素的背景颜色。 |
| [background-image](/cssref/pr_background-image.asp "CSS background-image 属性") | 把图像设置为背景。 |
| [background-position](/cssref/pr_background-position.asp "CSS background-position 属性") | 设置背景图像的起始位置。 |
| [background-repeat](/cssref/pr_background-repeat.asp "CSS background-repeat 属性") | 设置背景图像是否及如何重复。 |
- HTML 基础
- HTML 简介
- 基本的 HTML 标签 - 四个实例
- HTML 元素
- HTML 属性
- HTML 标题
- HTML 段落
- HTML 文本格式化
- HTML 编辑器
- HTML CSS
- HTML 链接
- HTML 图像
- HTML 表格
- HTML 列表
- HTML <div> 和 <span>
- HTML 布局
- HTML 表单和输入
- HTML 框架
- HTML Iframe
- HTML 背景
- HTML 颜色
- HTML 颜色名
- HTML 4.01 快速参考
- HTML 高级
- HTML <!DOCTYPE>
- HTML 头部元素
- HTML 脚本
- HTML 字符实体
- HTML 统一资源定位器
- HTML URL 字符编码
- HTML Web Server
- HTML 媒体
- HTML 多媒体
- HTML Object 元素
- HTML 音频
- HTML 视频
- HTML XHTML
- XHTML 简介
- XHTML - 元素
- XHTML - 属性
- HTML 5 教程
- HTML 5 简介
- HTML 5 视频
- HTML 5 Video + DOM
- HTML 5 音频
- HTML 5 拖放
- HTML 5 Canvas
- HTML5 内联 SVG
- HTML 5 Canvas vs. SVG
- HTML5 地理定位
- HTML 5 Web 存储
- HTML 5 应用程序缓存
- HTML 5 Web Workers
- HTML 5 服务器发送事件
- HTML5 Input 类型
- HTML5 表单元素
- HTML5 表单属性
- CSS 基础
- CSS 简介
- CSS 基础语法
- CSS 高级语法
- CSS 派生选择器
- CSS id 选择器
- CSS 类选择器
- CSS 属性选择器
- 如何创建 CSS
- CSS 样式
- CSS 背景
- CSS 文本
- CSS 字体
- CSS 链接
- CSS 列表
- CSS 表格
- CSS 轮廓
- CSS 框模型
- CSS 框模型概述
- CSS 内边距
- CSS 边框
- CSS 外边距
- CSS 外边距合并
- CSS 定位
- CSS 定位 (Positioning)
- CSS 相对定位
- CSS 绝对定位
- CSS 浮动
- CSS 选择器
- CSS 元素选择器
- CSS 分组
- CSS 类选择器详解
- CSS ID 选择器详解
- CSS 属性选择器详解
- CSS 后代选择器
- CSS 属性选择器详解
- CSS 后代选择器
- CSS 子元素选择器
- CSS 相邻兄弟选择器
- CSS 伪类 (Pseudo-classes)
- CSS 伪元素 (Pseudo-elements)
- CSS 高级
- CSS 水平对齐
- CSS 尺寸 (Dimension)
- CSS 分类 (Classification)
- CSS 导航条
- CSS 图片库
- CSS 图像透明度
- CSS2 媒介类型
- CSS 注意事项
- CSS3 教程
- CSS3 简介
- CSS3 边框
- CSS3 背景
- CSS3 文本效果
- CSS3 字体
- CSS3 2D 转换
- CSS3 3D 转换
- CSS3 过渡
- CSS3 动画
- CSS3 多列
- CSS3 用户界面
- Firebug 教程
- Firebug 教程
- 使用Firebug查看和编辑HTML和CSS
- 使用 Firebug 调试 JavaScript
- Firebug页面概况查看
- Firebug动态执行JavaScript
- Firebug记录Javascript日志
- Firebug监控网络情况
- 免责声明