背景图案上方的 CSS 渐变

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

试试这个：

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

Answer 3

我有一个适用于除 IE 之外的所有内容的工作版本。 ：/我不记得在哪里找到它，所以我不能给予适当的信任；然而，这里是：

背景：-webkit-线性渐变（rgba（224,147,43,.9），rgba（224,147,43,.8））固定，#454040 url（images/grainy2.png）重复固定；
背景：-ms-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) 固定，#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 仍然没有修复：/