Javascript 创建到div的线性透明渐变

我想创建一个到div的线性透明渐变。有没有办法用jquery做到这一点？或者我应该使用其他像raphaeljs这样的库吗？我希望达到如下效果：

---

不确定您到底在寻找什么，但请看一看。

您可以使用CSS3：

例如

---

为什么不保持它的轻便性和浏览器兼容性呢

div
{
    backgroud-image: url('images/gradient.png');
    background-repeat: repeat-x;
    background-position: top right;
}

---

我用Raphael js创建了这个 如果你喜欢就结账

**编辑**

---

我通过添加一个带有渐变的矩形来创建它，并使其与div大小相同。这里需要技巧的是，示例中的渐变均匀地映射到文本和容器。正如许多人所展示的那样，将透明渐变映射到背景属性很容易，但这将保持文本不变

不幸的是，我不认为有任何简单的方法可以获得你想要的梯度效果而不做一些妥协，根据你的需要，它们可能是值得的解决方案。因此，这里有两个示例，说明如何实现示例图像中显示的效果，都使用

1。假装

这很简单，您可以在文本块上放置一个

元素，并绘制一个从完全透明到文本块下方背景颜色的渐变。它不是真正透明的，所以它实际上不会显示下面的任何信息，但是如果你试图淡入一种纯色，预先确定的颜色，那么它的效果非常好

2。画布文本

此示例更复杂，但完全复制了示例中显示的透明效果。本质上，它完全抛弃了HTML文本块，只是将整个沙邦绘制到

上。然而，它也有一些缺点：

画布似乎不喜欢 包装文本，因此您必须指定 各行

画布文本可能仍然有一些模糊的浏览器实现

可访问性和SEO，不过您可以轻松编写jQuery插件，用于在运行时将带有文本的常规DOM元素转换为此解决方案

---

我使用jquery和112个div创建了它。10行文本div的父div（每行更透明）和100 div（每行更透明）的背景div

---

正如bArmageddon指出的那样，公认的解决方案并不能解决问题——它只是淡出背景。一个简单的解决方案是使用：before或：after在文本上添加渐变：

div {
    position: relative;
}
div:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: url("transparent_fade.png") repeat-x;
}

---

也许最可靠的解决方案是在div下放置一个带有渐变的半透明png。当然，渐变是垂直设置的。“对于非css3浏览器”？这里使用的唯一CSS3属性是

不透明度

，它不做任何渐变。其他3个属性是特定于供应商的。IMHO，这不是一个好的解决方案：它不是“未来的证明”，也不是我想在网上看到的那种东西。不错的想法和实现+1，但实际上已经有很多更实用的解决方案，我个人很好奇，是否可以用jquery作为主要工具来实现。这是如何创建线性透明渐变的？gradient.png不需要假设它的淡入颜色吗？png可以通过透明度淡入，因此背景颜色集将淡入颜色。此解决方案不回答问题，它不会使Div渐变的内容淡入白色，只会使背景淡入白色。

div {
    position: relative;
}
div:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: url("transparent_fade.png") repeat-x;
}