背景圖案上方的CSS漸變

我想將圖案背景和白色至黑色（具有透明度）漸變上方。如何解決它，並使其跨瀏覽器工作？我開始使用Mozilla和我試着用下面的代碼：背景圖案上方的CSS漸變

background: url(../images/bg_pattern.gif), -moz-linear-gradient(rgba(255, 255, 255, 0.5) 5%, rgba(130, 130, 130, 0.5) 95%

當然，這是行不通的。那麼如何解決它？代碼如何查找其他瀏覽器？ IE支持多種背景和透明度嗎？我認爲它不會，所以我會問你的答案之前 - 如何解決IE瀏覽器？

來源

2011-05-05 smogg

IE對CSS3最貧窮的支持，我不知道這一切的程度，但看起來這個網站可能指向你的好初始點。 http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ – robx 2011-05-05 17:06:22

您將需要兩個獨立的元素，一個覆蓋另一個。頂部的元素聽起來像它應該是你的漸變。此外FYI這裏是產生跨瀏覽器的梯度，只是在事件除了本週推出的一個很好的工具：

http://www.colorzilla.com/gradient-editor/

來源

2011-05-05 17:16:29 Joshua

是的，它的很酷的應用程序，但所有瀏覽器的漸變工作似乎很難，所以我做了這個最簡單的辦法。我已經做了一個PNG圖形和它的背景。但我怎樣才能調整bg圖形的高度，使其自動適合我的div高度？ – smogg 2011-05-05 17:40:14

@smogg - 該問題應該可能被添加到您的原始問題中，或者在新問題中創建。總之，這取決於你的背景圖片是什麼樣的（IOW，我們需要更多的信息）。 – Shauna 2011-05-05 17:58:58

@Shauna我只是不想用新的初學者問題發送垃圾郵件，但確定，我會在一秒鐘內完成。謝謝。 – smogg 2011-05-05 18:07:52

我爲一切工作版本IE除外。：/我不記得我在哪裏找到它，所以我不能給出適當的信用;但是，這裏是：

background：-webkit-linear-gradient（rgba（224,147,43，.9），rgba（224,147,43，.8））fixed，＃454040 url（images/grainy2.png ）重複固定; 背景：固定-MS-線性梯度（RGBA（224,147,43，0.9），RGBA（224,147,43，0.95）），＃454040 URL（圖像/ grainy2.png）重複固定的; 背景：-o-線性梯度（RGBA（224,147,43，0.9），RGBA（224,147,43，0.95））固定，＃454040 URL（圖像/ grainy2.png）重複固定的; 背景：-moz線性梯度（RGBA（224,147,43，0.9），RGBA（224,147,43，0.95））固定，＃454040 URL（圖像/ grainy2.png）重複固定的;

第一種顏色是你的頂部，第二你的底部，第三個是顏色在圖案（不知道你將如何減少到透明）。最後只是直接針對你的模式。

我不能完全確定是什麼毫秒。就像我說的，我已經使用了它幾個月，但我不記得來源。我只是全部使用它們來確保它們正常工作。仍然沒有修復IE瀏覽器：/

來源

2011-10-23 15:50:01 Marlon

不需要單獨的圖層，您的示例爲我工作，謝謝。 – 2013-09-29 17:08:18

試試這個：

background-image: url(images/pattern.png), -webkit-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), -moz-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), -ms-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), -o-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174)); 
    background-image: url(images/pattern.png), radial-gradient(circle at 0% 100%, rgb(20,150,254), rgb(119,117,174));

來源

2013-11-10 09:54:02

背景圖案上方的CSS漸變

回答

相關問題