css背景样式

css背景

background 简写属性：在一个声明中设置所有的背景属性

语法

• background: color image repeat attachment position

div {background: #fff url(../images/pic.jpg) no-repeat scroll fixed;}

background-color : 设置对象的背景颜色

属性值

• transparent ：默认值(背景色透明
• {color} ：指定颜色

div{background-color: transparent;} 
div{background-color: #ffffff;}

background-image : 设置对象的背景图像

属性值

• none ：默认值(无背景图)
• url({url}) ：使用*或相对 url 地址指定背景图像

div{background-image: none;} 
div{background-image: url(../images/piv.jpg);}

background-repeat : 设置对象的背景图像铺排方式

属性值

• repeat ：默认值(背景图像在纵向和横向平铺)
• no-repeat ：背景图像不平铺
• repeat-x ：背景图像仅在横向平铺
• repeat-y ：背景图像仅在纵向平铺

div{ 
 background-image: url(../images/piv.jpg); 
 background-repeat: no-repeat; 
} 

ackground-position : 设置对象的背景图像位置

属性值

{x-number | top | center | bottom } {y-number | left | center | right } ：控制背景图片在元素的位置：x轴 、y轴。其铺排方式为no-repeat

div{ 
 background-image: url(../images/piv.jpg); 
 background-position: left; 
} 

background-attachment : 设置对象的背景图像滚动位置

属性值

• scroll ：默认值。背景图像会随着页面其余部分的滚动而移动
• fixed : 当页面的其余部分滚动时，背景图像不会移动

div{ 
 background-image: url(../images/piv.jpg); 
 background-attachment: scroll; 
}