CSS学习(6)--背景属性

background              版本:CSS1  兼容性:IE4+ NS4+ 继承性:无

语法:
 
background : background-color || background-image || background-repeat || background-attachment || background-position
 
参数:

 
该属性是复合属性。
 
说明:
 
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为:transparent none repeat scroll 0% 0%。
尽管该属性不可继承,但如果未指定,其父对象的背景颜色和背景图将在对象下面显示。
 
示例: 

1  div  {  background :  red no-repeat scroll 5% 60% ;   }  
2  body  {  background :  url("images/aardvark.gif") repeat-y ;   }  
3  pre  {  background :  url("images/aardvark.gif") top ;   }  
4  caption  {  background :  fuchsia ;   }  

background-attachment    版本:CSS1  兼容性:IE4+ NS6+ 继承性:无

语法:
 
background-attachment : scroll | fixed
 
参数:
 
scroll :  背景图像是随对象内容滚动
fixed :  背景图像固定
 
说明:
 
设置或检索背景图像是随对象内容滚动还是固定的。
 
示例: 

1  html  {  background-image :  url("anasazi.tif") ;  background-attachment :  fixed ;   }  

background-color    版本:CSS1  兼容性:IE4+ NS4+ 继承性:无

语法:
 
background-color : transparent | color
 
参数:
 
transparent :  背景色透明
color :  指定颜色。
 
说明:
 
设置或检索对象的背景颜色。
 
示例: 

1  {  background-color :  silver  }
2  div  {  background-color :  rgb(223,71,177)  }  
3  body  {  background-color :  #98AB6F  }
4  pre  {  background-color :  transparent ;   }  

background-image  版本:CSS1  兼容性:IE4+ NS4+ 继承性:无
 
语法:
 
background-image : none | url (url)
 
参数:
 
none :  无背景图
url :  使用绝对或相对地址指定背景图像
 
说明:
 
设置或检索对象的背景图像。 
 
示例: 

1  code  {  background-image :  url("comet.jpg") ;   }
2  blockquote  {  background-image :  url("c:\InetPub\MyPixs\comet.jpg") ;   }  
3  br  {  background-image :  url(http://Fred.com/ImageFile/Q.gif) ;   }  
4  body  {  background-image :  none ;   }  

background-position    版本:CSS1  兼容性:IE4+ NS6+ 继承性:无
 
语法:
 
background-position : length || length
background-position : position || position
 
参数:
 
length :  百分数 | 由浮点数字和单位标识符组成的长度值。
position :  top | center | bottom | left | center | right
 
说明:
 
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
该属性定位不受对象的补丁属性(padding)设置影响。
 
示例: 

1  div  {  background :  url("images/aardvark.gif") ;  background-position :  35% 80% ;   }  
2  menu  {  background :  url("images/aardvark.gif") ;  background-position :  35% 2.5cm ;   }  
3  {  background :  url("images/aardvark.gif") ;  background-position :  3.25in ;   }  
4  body  {  background :  url("images/aardvark.gif") ;  background-position :  top right ;   }  

background-positionX    版本:IE5.5+专有属性 继承性:无
 
语法:
 
background-positionX : length | left | center | right
 
参数:

 
length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
left :  居左
center :  居中
right :  居右
 
说明:
 
设置或检索对象的背景图像横坐标位置。必须先指定background-image属性。默认值为:0%。
该属性定位不受对象的补丁属性(padding)设置影响。
 
示例: 

1  {  background-image :  url("images/aardvark.gif") ;  background-positionX :  35% ;  background-repeat : no-repeat ;   }  

background-positionY    版本:IE5.5+专有属性 继承性:无

语法:
 
background-positionY : length | top | center | bottom
 
参数:
 
length :  百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
top :  居顶
center :  居中
bottom :  居底
 
说明:
 
设置或检索对象的背景图像纵坐标位置。必须先指定background-image属性。默认值为:0%。
该属性定位不受对象的补丁属性(padding)设置影响。
 
示例: 

1  {  background-image :  url("images/aardvark.gif") ;  background-positionY :  35% ;  background-repeat : no-repeat ;   }

background-repeat    版本:CSS1  兼容性:IE4+ NS4+ 继承性:无
 
语法:
 
background-repeat : repeat | no-repeat | repeat-x | repeat-y
 
参数:
 
repeat :  背景图像在纵向和横向上平铺
no-repeat :  背景图像不平铺
repeat-x :  背景图像在横向上平铺
repeat-y :  背景图像在纵向平铺
 
说明:
 
设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。 
 
示例: 

1  menu  {  background :  url("images/aardvark.gif") ;  background-repeat :  repeat-y ;   }  
2  {  background :  url("images/aardvark.gif") ;  background-repeat :  no-repeat ;   }  

layer-background-color  版本:NS4+专有属性 继承性:无

语法:
 
layer-background-color : transparent | color
 
参数:
 
transparent :  背景色透明
color :  指定颜色。
 
说明:
 
设置或检索对象整个区域的背景颜色。
 
示例: 

1  div  {  layer-background-color :  transparent ;   }  

layer-background-image    版本:NS4+专有属性 继承性:无

语法:
 
layer-background-image : none | url (url)
 
参数:
 
none :  无背景图
url :  使用绝对或相对地址指定背景图像
 
说明:
 
设置或检索对象整个区域的背景图像。
 
示例: 

1  code  {  position :  absolute ;  top :  100px ;  left :  300px ;  width :  200px ;  border :  thin solid black ;  background-image :  url("comet.jpg") ;  layer-background-image :  url("bb_comet.jpg") ;   }  

你可能感兴趣的:(css)