随笔-167  评论-65  文章-0  trackbacks-0
体验css+div 之 给整个页面添加渐变背景



随着WEB2.0网页设计风格的盛行,越来越多的优秀UI出现在各大网站中,它以清爽、简洁、主次分明的特征迎得了广大网页设计师们和各大网站站长们的青睐,而WEB2.0表现最出色的地方就是它对光感效果透彻的运用,经常会看到WEB2.0清新,通透的效果,那么这一效果的实现运用的什么手法呢?它最主要的手法就是色调渐变的运用,如果在一个网页中能够成功运用渐变背景那么整个页面的主次效果就更加的显著,那么如何在CSS+DIV控制的HTML制作中实现:将整个网页背景添加渐变背景呢:下面这些将会让你轻松地解决问题:

body {

background: #e9e9e9 url (images / image.gif ) repeat-x;

}

小技巧:1. image.gif----它是一个渐变图片的高度不变的直细条

2. 我们知道网页宽度是限定的,而高度则是无限延伸的,当网页的高度超过"image.gif"的高度时渐变就会突然停止.不用担心,我们可以把渐变图片变化到一个固定颜色的色值做为背景颜色。而背景图片总是出现在背景颜色的上面,那么当渐变图片结束时,背景颜色就会显示出来了。这里图片和背景颜色之间的转换就看不出来了。


eg:


<style type="text/css">
body{

background: #dae9fe url(Images/bkgrd.gif) repeat-x ; /* 背景色渐变 */

}

</style>




write by feng
posted on 2009-03-20 19:07 fl1429 阅读(573) 评论(0)  编辑  收藏 所属分类: Ajax

只有注册用户登录后才能发表评论。


网站导航:
 
已访问数:
free counters