在網頁上用alpha渲染圖片

有沒有辦法在網頁上用alpha渲染背景紋理？我想在漸變的頂部有紋理，這樣我就能看穿它。在網頁上用alpha渲染圖片

我沒有使用帆布爲這個（雖然我也用帆布一些其他的動畫效果）

2012-08-06 ryf9059

可以實現與CSS3多背景和CSS3漸變。這是關於這個問題的good article。

編輯：爲了澄清，你基本上只需要在對象上定義兩個背景。第一個將是漸變，而第二個將是alpha紋理。

2012-08-06 08:15:53

這是IE9不支持之前。 – 2012-08-06 09:20:35

@JezenThomas是的，它不是。但是，現在對於不支持現代功能的瀏覽器使用後退通常是一個好主意，而不是降低大多數實際看到它們的體驗。 – 2012-08-06 10:09:01

同意，但這個問題很容易解決沒有CSS3。 – 2012-08-06 12:43:31

你可以只使用一個大的div作爲背景，並添加漸變和DIV中的PNG，然後使用CSS來調整大小和位置

2012-08-06 08:56:39

你不需要CSS3這一點。在html上使用無縫背景圖塊，在body上使用alpha梯度。

html {background: #fff url(path/to/bg-tile.png) repeat 0 0;} 
body {background: transparent url(path/to/gradient.png) repeat-x 0 0;}

2012-08-06 09:16:43

什麼是透明的關鍵詞？似乎不適合我，我應該爲它聲明一個alpha嗎？ – ryf9059 2012-08-13 17:29:36

這就是部分[CSS background fasthand declaration]（http://www.w3schools.com/css/css_background.asp）。它設置背景顏色。你是什麼意思「聲明一個alpha」？ – 2012-08-13 17:51:24

通過聲明一個alpha我意思是爲它分配一個值，因爲我的紋理不透明，應該有一個默認的阿爾法1，但這裏的透明不提供一個讓我困惑的alpha。 – ryf9059 2012-08-13 18:46:53

回答