體驗(yàn)css+div 之 給整個(gè)頁面添加漸變背景



隨著WEB2.0網(wǎng)頁設(shè)計(jì)風(fēng)格的盛行,越來越多的優(yōu)秀UI出現(xiàn)在各大網(wǎng)站中,它以清爽、簡潔、主次分明的特征迎得了廣大網(wǎng)頁設(shè)計(jì)師們和各大網(wǎng)站站長們的青睞，而WEB2.0表現(xiàn)最出色的地方就是它對(duì)光感效果透徹的運(yùn)用,經(jīng)常會(huì)看到WEB2.0清新,通透的效果,那么這一效果的實(shí)現(xiàn)運(yùn)用的什么手法呢?它最主要的手法就是色調(diào)漸變的運(yùn)用,如果在一個(gè)網(wǎng)頁中能夠成功運(yùn)用漸變背景那么整個(gè)頁面的主次效果就更加的顯著,那么如何在CSS+DIV控制的HTML制作中實(shí)現(xiàn):將整個(gè)網(wǎng)頁背景添加漸變背景呢:下面這些將會(huì)讓你輕松地解決問題:

body {

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

}

小技巧:1. image.gif----它是一個(gè)漸變圖片的高度不變的直細(xì)條

2. 我們知道網(wǎng)頁寬度是限定的,而高度則是無限延伸的,當(dāng)網(wǎng)頁的高度超過"image.gif"的高度時(shí)漸變就會(huì)突然停止.不用擔(dān)心,我們可以把漸變圖片變化到一個(gè)固定顏色的色值做為背景顏色。而背景圖片總是出現(xiàn)在背景顏色的上面，那么當(dāng)漸變圖片結(jié)束時(shí)，背景顏色就會(huì)顯示出來了。這里圖片和背景顏色之間的轉(zhuǎn)換就看不出來了。


eg:


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

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

}

</style>

write by feng