用CSS设置网页中的背景——背景图片

用CSS设置网页中的背景——背景图片

网页背景除了使用各种颜色，同样也可以使用各种图片。而通过CSS可以对背景图片进行很精确的控制，包括位置和重复方式等。
页面的背景图：在CSS中给页面添加背景图片的方法就是使用background-image属性，直接定义其url值，浏览器就会自动将图片覆盖整个页面。
如果给页面的body标记添加“background-image:url;”那么页面中的所有地方，都会以该图片作为背景。其中url里的值可以用网站的绝对路径，也可以使用相对路径。
如果背景图片使用的是透明的GIF格式图片，这时候如果再同时设置背景颜色background-color,则背景颜色会透过图片的透明部分，与图片同时生效。
背景图的重复：在CSS中可以通过background-repeat属性设置图片的重复方式，包括水平重复、竖直重复以及不重复等，如果将background-repeat的值设置为“repeat-x”，则背景图片将在水平方向上重复显示；除了水平方向和竖直方向以外，background-repeat属性还可以设置为“no-repeat”，即仅仅作为单一的背景图片显示。
如：body{
background-image:url; /*页面背景图片*/
background-repeat:repeat-y; /*垂直方向重复*/
background-repeat:repeat-x; /*水平方向重复*/
background-repeat:no-repeat; /*不重复*/
}
背景图片的设置包括对页面背景图、背景图的重复、背景图片的位置、固定背景图片、添加多个背景图片以及背景样式综合设置进行设置。
一、页面背景图；
二、背景图的重复；
三、背景图片的位置：默认情况下背景图片都是从设置了background属性的标记（例如body标记）的左上角开始出现的，但实际制作时设计者往往希望背景图片出现在指定的位置。在CSS中可以通过background-position属性轻松地调整背景图片的位置。如： body
{ background-image:url; /*背景图片*/
background-position:bottom right; /*背景位置，右下*/
}
除了bottom right外， background-position的值还可以设置为top left、top center、top right、center left、center center、center right、 bottom left、和bottom center等。
背景图片的位置不仅可以设置为上中下、左中右的模式，CSS还可以给背景图片的位置定义具体的百分比，实现精确定位。如
body
{ background-position:30% 70%; /*背景位置，百分比*/
}
四、固定背景图片：在CSS中可以通过设置 background-attachment的值为fixed来轻松实现。
五、添加多个背景图片;在CSS中一个标记只能用一次 background属性，因此只有给多个标记添加不同背景来实现类似的效果，如在body标记设置了背景图片的

基础上，再添加table和div等标记，来设置其它背景图。
六、背景样式综合设置;与border和font属性一样， background也可以将各种关于背景的设置集成到一个语句上，这样不仅可以节省大量代码，而且加快了网络下载页面的速度。