CSS中background的背景属性标准写法

单个属性的写法

书写格式：

background-color：#CCCCCC; /*背景颜色*/

background-image: url(sample.gif); /*背景图片*/

background-repeat: no-repeat; /*平铺与否*/

background-attachment: fixed; /*随文本滚动,很少用到*/

background-position: center center; /*背景图片位置*/

}

复合属性的写法

书写格式：

background : background-color background-image background-repeat
background-attachment background-position;

默认值
background: transparent none repeat scroll 0% 0%;

默认值(中文意思)
background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动 / 位于元素左上角

按照以上的方法，将 .sample1 改成 .sample2，可以得到相同的样式。

.sample2 {
background: #CCCCCC url(sample.gif) no-repeat fixed center center;
}

background的书写顺序是比较容易理解的。

1. 首先要有背景颜色 background-color ，在背景图片（如果有设置）未载入之前，先显示的是背景颜色。默认为 transparent（透明，即应用父元素或 BODY 的背景设置），可以省略，不过在应用一些JS事件时最好将它写上，以示规范；

2. 接下来就是背景图片 background-image 。如果没有此项，那么后面的项就没有任何意义了；

3. 是否平铺 background-repeat 要写在 background-position 之前，很容易理解，如果此项设置了 repeat （铺满整个元素），那么 position 设置就基本失去作用了；

4. fixed 一般用在 body 上，其他地方不大见到；

5. background-position：有2个值，垂直位置和水平位置。按代码写法是没有顺序的：比如说背景图片位于元素的右下角，可以写成 bottom right ，也可以写成 right bottom ；如果按百分比写法是有顺序的：比如 20% 30% ，第1个百分比表示水平位置，第2个百分比表示垂直位置。有意思的是这里的垂直居中是 center 而不是 middle 。你可以设置一个 center 表示图片的居中，相当于 center center 或者 50% 50% 。