第7章 用CSS设置背景.ppt

第7章 用CSS设置背景 在网页上只有图片和文字的混排，会显得非常单调。在网页上使用背景能使网页的外观变得丰富多彩。CSS提供了控制背景颜色和背景图片的多个属性，用于产生表现丰富的网页背景。在XHTML文档中，大部分标签都能应用background属性，包括body标签。设置body标签的背景属性就是设置整个页面的背景。本章内容包括： 使用CSS属性控制页面元素的背景样式 background属性的缩写 制作圆角导航 7.1 设置背景颜色 CSS提供background-color属性用于设置页面元素的背景颜色。 7.2 设置背景图片 除了使用颜色设置背景，还可以使用图片设置背景。使用图片作为网页元素的背景，就涉及图片的位置和重复方式。使用CSS样式能精确地控制背景图片的位置和重复方式。 7.2.1 为元素添加背景图案 使用CSS提供的background-image属性可以直接为页面元素插入一个背景图片。 7.2.2 背景图的重复 为了改变背景图在网页元素中的重复方式， 需要使用CSS提供的background-repeat属性。 7.2.3 背景图的位置 若设置背景图的background-repeat为no-repeat，背景图出现在网页元素的左上角。若设置background-repeat为其他重复值，背景图也是从左上角开始平铺。在默认情况下，背景图总是出现在页面元素的左上角。CSS提供background-position属性用于改变背景图与页面元素的相对位置。 1．使用长度单位设置背景图的位置 2．使用百分比设置背景图的位置 3．使用关键字设置背景图的位置 7.2.4 滚动和固定背景图 当一个网页的页面超过浏览器的窗口时，该页面右侧就会产生滚动条。当用户拖动滚动条时，就能浏览到页面下方的内容。在拖动时会发现网页的背景也会跟着改变。若要实现当拖动滚动条时，背景不移动就需要使用CSS提供的background-attachment属性。background-attachment属性只有两个值，分别是scroll和fixed，默认属性值为scroll。 scroll：背景图是随对象内容滚动； 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属性用于更改页面元素的背景设置。本章的重点是更改页面原色的背景颜色和背景图片位置以及重复方式。本章的难点是结合XHTML和CSS的背景属性创建出预期的页面效果。下一章将讲述使用CSS技术控制超链接的样式。