CSS中背景(background)的5中属性

背景(background): 包括background-color, background-image, background-repeat, background-attachment, background-position五种属性.  

1. background-color: 指背景颜色, 其属性值有三种形式, 十六进制, 颜色名称, rgb值. 目前最为常用的是”#+十六进制数”. 例: 本站显示代码的段落背景为#EEEEEE的灰色, 代码及示例如下:  

background-color: #EEEEEE; 

2. background-image: 指背景图片, 其属性值为背景图片的地址, 代码和格式如下: 

background-image: url(http://jorux.com/back.png); 

例: 本站首页的第一篇文章标题前有个”NEW”图标, 查看css可见如下代码: 

#homeheadline a{ 
color:#444; 
padding: 30px 68px 0 40px; 
margin:0; 
background:url(images/new.png) no-repeat 0 16px ; 
} 

3. background-repeat: 指背景图片的重复与否以及重复方式, 有no-repeat, repeat, repeat-x, repeat-y四种属性值. 

no-repeat: 即无论背景图片的大小, 只显示单个背景图片,  如首页的第一篇文章标题前的”NEW”图标, 代码如上所示; 

repeat: 指背景图片横向和纵向重复连续显示; 

repeat-x: 指背景图片横向重复连续显示; 

repeat-y 指背景图片纵向重复连续显示;例: 查看本站css文件,可以看到以下代码: 

body { 
font: normal 12px/1.5 Georgia, sans-serif; 
text-align:left; 
background:#444 url(images/bodybg.jpg) repeat-y; 
} 

可以看到背景图片bodybg.jpg是纵向重复显示的, 并随页面的长度的增加而增加. 

4. background-attachment: 指背景图片的附着方式, 有scroll(默认属性)和fixed两种属性值. scroll指背景图片随页面的滚动而滚动, 而fixed属性值则可使背景图片固定于浏览器的某个位置, 不随页面滚动而滚动. 如下例所示, 您可以试着滚动本页面来看看两图的差别, 左边为scroll, 右边为fixed(请用IE观看以下演示):