第7章 用CSS设置背景.ppt

1、第7章用CSS设置背景,在网页上只有图片和文字的混排，会显得非常单调。在网页上使用背景能使网页的外观变得丰富多彩。CSS提供了控制背景颜色和背景图片的多个属性，用于产生表现丰富的网页背景。在XHTML文档中，大部分标签都能应用background属性，包括body标签。设置body标签的背景属性就是设置整个页面的背景。本章内容包括：使用CSS属性控制页面元素的背景样式background属性的缩写制作圆角导航,7.1设置背景颜色,CSS提供background-color属性用于设置页面元素的背景颜色。例7-1background-color:transparent|color参数：trans

2、parent:背景色透明color:指定颜色。,7.2设置背景图片,除了使用颜色设置背景，还可以使用图片设置背景。使用图片作为网页元素的背景，就涉及图片的位置和重复方式。使用CSS样式能精确地控制背景图片的位置和重复方式。,7.2.1为元素添加背景图案,使用CSS提供的background-image属性可以直接为页面元素插入一个背景图片。例7-2background-image:none|url(url)参数：none:无背景图url:使用绝对或相对地址指定背景图像注：默认的情况下，图片会平铺整个网页。,7.2.2背景图的重复,为了改变背景图在网页元素中的重复方式，需要使用CSS提供的bac

3、kground-repeat属性。例7-3background-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-positi

4、on属性用于改变背景图与页面元素的相对位置。,background-position:length|lengthbackground-position:position|position参数：length:百分数|由浮点数字和单位标识符组成的长度值。position:top|center|bottom|left|center|right1使用长度单位设置背景图的位置例7-42使用百分比设置背景图的位置例7-53使用关键字设置背景图的位置例7-6,7.2.4滚动和固定背景图,当一个网页的页面超过浏览器的窗口时，该页面右侧就会产生滚动条。当用户拖动滚动条时，就能浏览到页面下方的内容。在拖动时会发现

5、网页的背景也会跟着改变。若要实现当拖动滚动条时，背景不移动就需要使用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

6、);background-position:topright;background-repeat:no-repeat;background-attachment:fixed;-background:url(bj1.jpg)toprightno-repeatfixed;,7.3本章实例：制作圆角,在web2.0的风潮中，最受追捧的就是圆角的应用了。通常实现圆角都是利用背景图片实现的。本章实例将讲述如何合理使用背景来实现圆角效果。本章实例难度较高，初学者可以先跳过该实例。实例中使用了div标签作为容器。关于div标签的用法可先查阅本书第15章。在之前的章节中已经运用到div标签作为容器。设定了di

7、v标签的宽度和高度后，div标签就会成为一个“容器”，在页面中占据一定的位置。在默认情况下，div容器是垂直排布的。,步骤：1.新建一个文件夹名为chapter7，在该文件夹中新建一个标准XHTML文档，命名为index.html。然后再新建一个images文件夹，用于存放图片。2.如果将整个圆角矩形作为一张背景图片的话，当文章加长或缩短都会使背景与文字长度不匹配。所以解决的方法是，将整个圆角分为三部分：上下两个圆角，中间为一个矩形。上面的圆角作为一个div容器的背景，下面的圆角作为另外一个div容器的背景，中间部分是一个长度不固定的div容器。把上面的圆角制作为一张宽700px，高8px的图

8、片，名为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是生效的？