第7章用CSS设置背景

,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,第,7,章 用,CSS,设置背景,在网页上只有图片和文字的混排，会显得非常单调。,在网页上使用背景能使网页的外观变得丰富多彩。,CSS,提供,了控制背景颜色和背景图片的多个属性，用于产生表现丰富,的网页背景。在,XHTML,文档中，大部分标签都能应用,background,属性，包括,body,标签。,设置,body,标签的背景,属性就是设置整个页面的背景。,本章内容包括：,使用,CSS,属性控制页面元素的背景样式,background,属性的缩写,制作圆角导航,7.1,设置背景颜色,CSS,提供,background-color,属性用于设置页面元素的,背景颜色。例,7-1,background-color:transparent|,color,参数：,transparent:,背景色透明,color:,指定颜色。,7.2,设置背景图片,除了使用颜色设置背景，还可以使用图片设置背景。,使用图片作为网页元素的背景，就涉及图片的位置和重复方,式。使用,CSS,样式能精确地控制背景图片的位置和重复方式,。,7.2.1,为元素添加背景图案,使用,CSS,提供的,background-image,属性可以直接为,页面元素插入一个背景图片。例,7-2,background-image:none|,url,(,url,),参数：,none:,无背景图,url,:,使用绝对或相对地,址指定背景图像,注：默认的情况下，图片会,平铺整个网页。,7.2.2,背景图的重复,为了改变背景图在网页元素中的重复方式，需要使用,CSS,提供的,background-repeat,属性。例,7-3,background-repeat:repeat|no-repeat|repeat-x|repeat-y,参数：,repeat:,背景图像在纵向和横向上平铺,no-repeat:,背景图像不平铺,repeat-x:,背景图像在横向上平铺,repeat-y:,背景图像在纵向平铺,7.2.3,背景图的位置,若设置背景图的,background-repeat,为,no-repeat,，背,景图出现在网页元素的左上角。若设置,background-repeat,为其他重复值，背景图也是从左上角开始平铺。在默认情况,下，背景图总是出现在页面元素的左上角。,CSS,提供,background-position,属性用于改变背景图与页面元素的相,对位置。,background-position:,length,|,length,background-position:,position,|,position,参数：,length:,百分数,|,由浮点数字和单位标识符组成的长度值。,position:,top|center|bottom|left|center|right,1,使用长度单位设置背景图的位置 例,7-4,2,使用百分比设置背景图的位置 例,7-5,3,使用关键字设置背景图的位置 例,7-6,7.2.4,滚动和固定背景图,当一个网页的页面超过浏览器的窗口时，该页面右侧,就会产生滚动条。当用户拖动滚动条时，就能浏览到页面下,方的内容。在拖动时会发现网页的背景也会跟着改变。若要,实现当拖动滚动条时，背景不移动就需要使用,CSS,提供的,background-attachment,属性。,background-attachment,属性只有两个值，分别是,scroll,和,fixed,，默认属性值为,scroll,。,scroll,：背景图是随对象内容滚动；,fixed,：背景图固定。例,7-7,7.2.5,背景属性缩写,上述的,background-image,、,background-position,、,background-repeat,和,background-attachment,属性可以,使用,background,属性进行缩写。,background-image:url(bj1.jpg);,background-,position:top,right;,background-,repeat:no,-repeat;,background-,attachment:fixed,;,-,background:url(bj1.jpg)top right no-repeat fixed;,7.3,本章实例：制作圆角,在,web2.0,的风潮中，最受追捧的就是圆角的应用了。,通常实现圆角都是利用背景图片实现的。本章实例将讲述如,何合理使用背景来实现圆角效果。本章实例难度较高，初学,者可以先跳过该实例。实例中使用了,div,标签作为容器。关,于,div,标签的用法可先查阅本书第,15,章。在之前的章节中已,经运用到,div,标签作为容器。设定了,div,标签的宽度和高度后,，,div,标签就会成为一个“容器”，在页面中占据一定的位置,。在默认情况下，,div,容器是垂直排布的。,步骤：,1.,新建一个文件夹名为,chapter7,，在该文件夹中新建一个标准,XHTML,文档，命名为,index.html,。然后再新建一个,images,文件夹，用于存放图片。,2.,如果将整个圆角矩形作为一张背景图片的话，当文章加长或缩短都会使背景与文字长度不匹配。所以解决的方法是，将整个圆角分为三部分：上下两个圆角，中间为一个矩形。上面的圆角作为一个,div,容器的背景，下面的圆角作为另外一个,div,容器的背景，中间部分是一个长度不固定的,div,容器。把上面的圆角制作为一张宽,700px,，高,8px,的图片，名为,top.gif,，放置在,images,文件夹中。同理，下面的圆角命名为,btm.gif,。,3.,在,XHMTL,页面中加入三个,div,标签。,4.,为第一个和第三个,div,标签设置圆角的背景图片，设置中间的,div,标签。,5.,选择器指向,XHTML,文档中的,div,标签。,6.,在,IE,浏览器下，顶部的圆角和中间的矩形不能紧密拼合，为解决这一问题，设置顶部,div,和底部,div,的文字大小为,0.,7.,由于浏览器对于元素的边距和补白定义的初始值都不同，为了兼容大部分浏览器要把整个网页的边距和补白都设置为,0.,8.,加入正文。整个网页的边距和补白都设置为,0,后，圆角框会紧贴页面左上角。为了让其往页面中间靠拢，设置,body,标签的补白为,10px,。最后设置文字的样式。,7.4,常见面试题,问题,1,：能否给一个标签放置多个背景图片？,问题,2,：在,IE6,中，只有哪个标签设置,background-attachment,属性为,fixed,是生效的？,7.5,小结,本章讲解了使用,CSS,的,background,属性用于更改页面元素,的背景设置。本章的重点是更改页面原色的背景颜色和背景,图片位置以及重复方式。,本章的难点是结合,XHTML,和,CSS,的背景属性创建出预期的,页面效果。下一章将讲述使用,CSS,技术控制超链接的样式。,