Question

我想在它上面制作图案背景和白色到黑色（带透明度）渐变。如何解决它并使其跨浏览器工作？我从Mozilla开始，我尝试使用下面的代码：

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工作呢？

Answer 1

您需要两个独立的元素，一个覆盖另一个元素。顶部的元素听起来应该是你的渐变。此外，仅供参考，这是一个生成跨浏览器渐变的好工具，本周刚刚在An Event Apart上推出：

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

Answer 2

除了IE之外，我还有一个工作版本。：/我不记得我在哪里找到它，所以我不能给予适当的信任;但是，这是：

背景：-webkit-linear-gradient（rgba（224,147,43，.9），rgba（224,147,43，.8））固定，＃454040 url（images / grainy2.png）重复固定; background：-ms-linear-gradient（rgba（224,147,43，.9），rgba（224,147,43，.95））fixed，＃454040 url（images / grainy2.png）重复固定; 背景：-o-linear-gradient（rgba（224,147,43，.9），rgba（224,147,43，.95））固定，＃454040 url（images / grainy2.png）重复固定; 背景：-moz-linear-gradient（rgba（224,147,43，.9），rgba（224,147,43，.95））固定，＃454040 url（images / grainy2.png）重复固定;

第一种颜色是你的顶部，第二种颜色是你的底部，第三种颜色是模式上的颜色（不确定如何将其减少为透明）。最后直接指向您的模式。

我不完全确定ms的用途。就像我说的，我已经使用了大约几个月，但我不记得来源。我只是用它们来确保它们有效。仍无法修复IE：/

Answer 3

试试这个：

    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));

背景图案上面的CSS渐变

3 个答案: