在制作網頁時, 我們很常會使用雜訊的效果去制作背景圖片, 而常用的方法都是直接弄一張圖片去做這個效果。可是當我們的網站有多個位置要使用到有雜訊的圖片, 而且需要不同的顏色及透明度, 那豈不要弄很多張不同的圖片? 以下便介紹大家一個方法, 只需使用一張透明的雜訊圖片, 便可制作無限個不同顏色不同透明度的雜訊背景

首先, 最基本的是建立一個不透明的雜訊背景, 這是很簡單的事, 一個背景顏色加一張雜訊圖片便可以了, 除IE6或以下的瀏覽器, 其他瀏覽器應該也沒有問題的了, CSS代碼如下

background: url(noise.png) #F00

這樣便建立了一個有雜訊的紅色背景, 如果你需要透明度, 可使用 rgba 去設定背景顏色:

background: url(noise.png) rgba(255,0,0,0.5)

這樣便將原來的紅色雜訊背景變成 50% 透明的背景了
可是IE8或以下的瀏覽器並不支援 rgba 的設定, 所以我們又要做一些手腳了:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#AAFF0000', endColorstr='#AAFF0000');

加了以上的 filter 代碼後, IE 便可看到透明的背景, 上面 FF0000 是顏色代碼, 而 AA 則是十六進制的透明度, FF 代表不透明, 00 代表全透明
可是你可能發現怎麼透明是透明了, 但雜訊好像不見了, 沒錯, 因為 rgba 和 filter 共存時, IE 便吃不了背景圖片了, 所以這時我們要使用 CSS Hack 去令他們互相配合, 整套代碼如下

background: url(noise.png) rgba(255,0,0,0.5); // for modern browser
background: url(noise.png) transparent \\\\9;// for IE8 or below
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#77FF0000', endColorstr='#77FF0000');

以下是一個例子: