网站设计与开发课程 第7章 用CSS设置网页背景 课件.ppt

#footer { clear: both; height: 37px; background: url(images/footer-bg.jpg); } #footer { clear: both; height: 22px; background: url(images/footer-bg.jpg); padding-top: 15px; text-align: center; } #extraDiv { width: 272px; height: 334px; background:url(images/jump.gif); } #extraDiv { width: 272px; height: 334px; background: url(images/jump.gif); position: absolute; top: 35px; left: 5px; } #sidebar { padding: 0 50px; background: url(images/sidebar-bg.jpg) repeat-x; margin-top: 100px; } #sidebar { padding: 0 50px; background: url(images/sidebar-bg.jpg) repeat-x; margin-top: 100px; } #sidebar { padding: 0 50px; background: url(images/sidebar-bg.jpg) repeat-x; padding-top: 100px; } 小结： 制作网页背景图像的切片时，需要考虑网页的适应性，不宜用整个图像作背景。 要从网页的结构出发，为每个背景图像找到合适的元素来应用。 当找不到合适的元素应用背景图像时，可以在网页中添加额外的 div。 创建垂直渐变背景的方法是：将渐变图像应用于 body 元素，并让它水平重复（repeat-x）；同时，给网页添加一个背景色，背景色与渐变图像底部的颜色相同。 对于多列布局的网页，常常需要利用 container 的背景图像制作“伪列”。 7.3 用背景图像替换文本 用背景图像替换文本 HTML div id=“header” h1css Zen Garden/h1 h2The Beauty of CSS Design/h2 /div 用背景图像替换文本 HTML CSS div id=“header” h1css Zen Garden/h1 h2The Beauty of CSS Design/h2 /div #header { height: 300px; background: url(images/header-bg.jpg); } 用背景图像替换文本 HTML CSS div id=“header” h1css Zen Garden/h1 h2The Beauty of CSS Design/h2 /div #header { height: 300px; background: url(images/header-bg.jpg); } #header h1, #header h2 { display: none; } header-bg.jpg footer-bg.jpg container-bg.jpg sidebar-bg.jpg content-bg.jpg body-bg.jpg 颜色：#f2caff 网页背景图像切片 body-bg.jpg footer-bg.jpg header-bg.jpg container-bg.jpg sidebar-bg.jpg jump.jpg participation-bg.jpg #f2caff content-bg.jpg body { font: 0.75em Tahoma, Arial, sans-serif; color: #000000; background: url(images/body-bg.jpg); } body { font: 0.75em Tahoma, Arial, sans-serif; color: #000000; background: url(images/body-bg.jpg) repeat-x; } body {