为 div 创建线性透明渐变

Question

我想为 div 创建一个线性透明渐变。有什么办法可以用 jquery 做到这一点吗？或者我应该使用其他库，例如 raphaeljs？我想实现如下效果：

Answer 1

为什么不保持轻便并兼容浏览器呢？

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

Answer 2

您可以使用 CSS3 来做到这一点：

例如

div {
    opacity: 0.5;
    background: #999; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
}

http://www.webdesignerwall.com/教程/cross-browser-css-gradient/

http://gradients.glrzad.com/

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

http://css-tricks.com/css3-gradients/

Answer 3

我使用 jquery 和 112 个 div 创建了它。一个父 div 包含 10 行文本 div，每个 div 更透明，一个背景 div 包含 100 个 div，每个 div 更透明。

http://jsfiddle.net/generalhenry/bDd5w/

Answer 4

这里棘手的一点是示例中的渐变均匀地映射到文本和容器。正如很多人所展示的那样，将透明渐变映射到背景属性很容易，但这将使文本保持不变。

不幸的是，我认为没有任何直接的方法可以在不做出一些妥协的情况下获得您想要的渐变效果，根据您的需求，它们可能是值得的解决方案。为此，这里有两个示例，说明如何实现示例图像中所示的效果，均使用 。

1.伪造它

JSLint 上的演示。

这很简单，您将 <文本块上的 canvas> 元素，并绘制从完全透明到文本块下方背景颜色的渐变。它并不是真正透明的，因此它实际上不会显示下面的任何信息，但如果您尝试淡入淡出为纯色、预定颜色，那么这种方法效果很好。

2.画布文本

JSLint 上的演示

这个示例更复杂，但完全复制了所示的透明效果在你的例子中。本质上，它完全抛弃了 HTML 文本块，只是将整个 shabang 绘制到 上。然而，它有一些缺点：

1. 画布似乎不喜欢
   换行文本，因此您必须指定
   单独的线条。

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

3. 辅助功能和 用于在运行时将带有文本的常规 DOM 元素转换为此解决方案。

Answer 5

不确定你到底在寻找什么，但看看 Gradienter jQuery 插件。

Answer 6

我使用Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ 创建了这个
看看你是否喜欢它

** 编辑 **

我通过添加一个带有渐变的矩形并使其与 div 大小相同来创建它

Answer 7

正如 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;
}