CSS3 網頁背景淡出效果設計

CSS3 網頁背景淡出效果設計可以利用相機拍攝的照片,直接轉成淡出的網頁背景效果,不需要先用繪圖軟體就能做到,這個技巧所運用的是 CSS3Gradients 漸層效果來處理,在 background 屬性裡加入背景圖片以及透明度與漸層處理,就可以呈現出網頁背景淡出效果,網頁設計師僅需調整顏色與透明度的參數,就可以直接調整網頁背景圖片的淡出效果,要多夢幻自己決定。

在這裡我們要先使用一張原始圖片作為網頁背景圖片
有了這張圖片,就可以套用到網頁背景中,來看看語法吧!

CSS3 網頁背景淡出效果範例一、透明度為 0 的情況
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#container{
height:375px;
background:#fff;
background:linear-gradient(top,#ffffff,rgba(51,51,51,0)),url(原始背景圖片網址) center bottom no-repeat;
background:-moz-linear-gradient(top,#ffffff,rgba(51,51,51,0)),url(原始背景圖片網址) center bottom no-repeat;
background:-webkit-linear-gradient(top,#ffffff,rgba(51,51,51,0)),url(原始背景圖片網址) center bottom no-repeat;
}
</style>
<body>
    <div id="container">
        ...網站內容...
    </div>
</body>
實際的淡出效果

我們在範例一所使用的是從上而下的漸層效果,背景顏色由上方開始是白色(#ffffff)漸層變成下方的灰色(rgba(51,51,51,0)),不過我們把灰色的部份透明度設為 0,也就是 rgba 的最後一個用來控制透明度的參數設為 0,所以背景圖片上方有一層白色霧茫茫的感覺,可是最下方是清楚的,如果想讓下方也蒙掉,那就調整灰色部份的透明度吧!請看範例二。

CSS3 網頁背景淡出效果範例二、透明度為 30% 的情況
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#container{
height:375px;
background:#fff;
background:linear-gradient(top,#ffffff,rgba(51,51,51,0.3)),url(原始背景圖片網址) center bottom no-repeat;
background:-moz-linear-gradient(top,#ffffff,rgba(51,51,51,0.3)),url(原始背景圖片網址) center bottom no-repeat;
background:-webkit-linear-gradient(top,#ffffff,rgba(51,51,51,0.3)),url(原始背景圖片網址) center bottom no-repeat;
}
</style>
<body>
    <div id="container">
        ...網站內容...
    </div>
</body>
實際的淡出效果

範例二將範例一的 rgba 最後一個參數設為 0.3,這代表灰色的部份透明度表現為 30%,與範例一相較之下,可以很明顯的看出背景圖片底下有一點點灰灰的感覺,這兩個範例都是使用同一張清晰的背景圖片,透過 Gradients 漸層效果效果與透明度調整,創造出網頁背景圖片淡出效果的實際應用,各位設計師可以自己修改範例與法中的漸層開始顏色與結束顏色,再調整透明度,就能變化出各式各樣的網頁背景淡出效果,相當有趣也很實用。

更多網頁背景設計
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C