为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：

E.g。

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>实现示例图像中显示的效果。

<强> 1。假装

Demo on JSLint.

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

<强> 2。画布文字

Demo on JSLint

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

1. 画布似乎不喜欢 包装文本，所以你必须指定 个别行。

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

3. 辅助功能＆amp; SEO，虽然您可以轻松编写一个jQuery插件，用于在运行时将带有文本的常规DOM元素转换为此解决方案。

Answer 5

不确定您究竟在寻找什么，但请查看Gradienter jQuery plugin。

Answer 6

我使用Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/创建了这个 结帐如果你喜欢它

**编辑**

我通过添加一个带有渐变的rectagle并使其与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;
}