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; /*偏移指定值*/