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

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

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

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

更多網頁背景設計

• CSS3 網頁漸層背景顏色效果設計
• CSS3 Gradients 漸層效果
• 利用 CSS3 設計背景圖片自動縮放全螢幕展示效果

您可能會想看

• CSS Attribute Selectors 屬性選擇器
• 替 CSS span 區域增加陰影效果
• 用 CSS3 box-shadow 設計 DIV 區塊陰影效果
• 用 CSS3 box-shadow 設計圖片陰影效果
• CSS3 網頁漸層背景顏色效果設計
• CSS3 Gradients 漸層效果
• CSS3 多重背景圖片設計
• 利用 CSS3 設計背景圖片自動縮放全螢幕展示效果
• CSS3 邊框設計
• CSS3 outline-offset 屬性

今日熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法

即時熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法