《用CSS设置背景》PPT课件.ppt

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

2、网页元素的背景，就涉及图片的位置和重复方式。使用CSS样式能精确地控制背景图片的位置和重复方式。,7.2.1 为元素添加背景图案,使用CSS提供的background-image属性可以直接为页面元素插入一个背景图片。,7.2.2 背景图的重复,为了改变背景图在网页元素中的重复方式， 需要使用CSS提供的background-repeat属性。,7.2.3 背景图的位置,若设置背景图的background-repeat为no-repeat，背景图出现在网页元素的左上角。若设置background-repeat为其他重复值，背景图也是从左上角开始平铺。在默认情况下，背景图总是出现在页面元素的左上

3、角。CSS提供background-position属性用于改变背景图与页面元素的相对位置。 1使用长度单位设置背景图的位置 2使用百分比设置背景图的位置 3使用关键字设置背景图的位置,7.2.4 滚动和固定背景图,当一个网页的页面超过浏览器的窗口时，该页面右侧就会产生滚动条。当用户拖动滚动条时，就能浏览到页面下方的内容。在拖动时会发现网页的背景也会跟着改变。若要实现当拖动滚动条时，背景不移动就需要使用CSS提供的background-attachment属性。background-attachment属性只有两个值，分别是scroll和fixed，默认属性值为scroll。 scroll：背

4、景图是随对象内容滚动； fixed：背景图固定。,7.2.5 背景属性缩写,上述的background-image、background-position、background-repeat和background-attachment属性可以使用background属性进行缩写。,7.3 本章实例：制作圆角,在web2.0的风潮中，最受追捧的就是圆角的应用了。通常实现圆角都是利用背景图片实现的。本章实例将讲述如何合理使用背景来实现圆角效果。本章实例难度较高，初学者可以先跳过该实例。实例中使用了div标签作为容器。关于div标签的用法可先查阅本书第15章。在之前的章节中已经运用到div标签作为容器。设定了div标签的宽度和高度后，div标签就会成为一个“容器”，在页面中占据一定的位置。在默认情况下，div容器是垂直排布的。,7.4 常见面试题,问题1：能否给一个标签放置多个背景图片？ 问题2：在IE6中，只有哪个标签设置background-attachment属性为fixed是生效的？ 出自俊网天下:,7.5 小结,本章讲解了使用CSS的background属性用于更改页面元素的背景设置。本章的重点是更改页面原色的