Web元素设计之背景控制

1. background

---

该属性集成了所有CSS背景控制的相关内容，书写形式如下（注意顺序）：

background: #ececec url(imgs/bg.png) no-repeat fixed 0 0;

即：background: 背景颜色 背景图片 背景图片平铺模式 背景图片滚动模式 背景图片定位

当然，对于不需要指定的或者使用默认值的，省略即可。

2. background-color

---

该属性用于设定元素的背景颜色。

默认值为transparent，表示背景颜色为透明，也就是无背景颜色。

支持16进制颜色值、RGB颜色值以及颜色名称。考虑到兼容性，建议使用16进制颜色值或者RGB颜色值。

3. background-image

---

该属性用于设定元素的背景图片，书写形式如下：

background-image: url(imgs/bg.png);

4. background-repeat

---

该属性用于控制背景图片的平铺模式（横向平铺、纵向平铺、不平铺），默认横向、纵向都平铺。书写形式如下：

background-repeat: repeat-x;

background-repeat: no-repeat;

5. background-attachment

---

该属性用于设定背景图片的滚动模式。

默认情况下，当出现滚动条时，背景图片会随着滚动条的滚动而滚动。当希望背景图片始终固定不变时，可以将该属性设置如下：

background-attachment: fixed;

此时背景图片将会完全固定。该属性的默认值为scroll。

6. background-position

---

该属性用于设定背景图片的定位，也就是控制背景图片在元素中的定位（相当于将背景图片针对元素作相对定位）。雪碧图的原理就基于此项属性。

其值支持百分比、元素值、位置描述词（top/bottom/left/right/center）等。书写形式如下：

background-position: center top;  /*中上位置*/

background-position: 50% 50%;  /*完全居中*/

background-position: -20px -10px;  /*偏移指定值*/