为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/tutorials/cross-browser-css-gradient/

http://gradients.glrzad.com/

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

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

Answer 3

我使用jquery和112 divs创建它。 十行文本div的父div更加透明，每个100 div的背景div更透明。

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

Answer 4

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

不幸的是，我认为没有任何直接的方法来获得您想要的渐变效果而不做出一些妥协，这取决于您的需求，它们可能是值得的解决方案。 因此，为此，有两个示例，说明如何使用<canvas>实现示例图像中显示的效果。

伪造它

在JSLint上演示。

这很简单，您可以在文本块上放置<canvas>元素，然后绘制从完全透明到文本块下方背景颜色的渐变。 它不是真的透明，所以它实际上并没有透露下面的任何信息，但是如果你试图淡化为固定的，预定的颜色，那么这种效果非常好。

2.画布文字

在JSLint上演示

此示例更复杂，但完全复制了示例中显示的透明效果。 从本质上讲，它完全抛弃了HTML文本块，只是将整个shabang绘制到<canvas> 。 但是，它有一些缺点：

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

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

3. 可访问性和搜索引擎优化，尽管您可以轻松编写一个jQuery插件，用于在运行时将带有文本的常规DOM元素转换为此解决方案。

Answer 5

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

Answer 6

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

Answer 7

我使用Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ checkout创建了这个，如果你喜欢的话

**编辑**

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