为div创建线性透明渐变

Question

我想为div创建线性透明渐变。有没有办法用jQuery来做到这一点？或者我应该使用一些其他类似raphaeljs的图书馆吗？我想实现类似如下效果：

Answer 1

为什么不保持轻盈和浏览器兼容。

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

Answer 2

不知道你正在寻找什么，但看看Gradienter jQuery plugin。

Answer 3

你可以用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 4

我建立这个使用圣拉斐尔JS http://www.jsfiddle.net/pahnin/fsdnW/4/ 结帐如果u喜欢它

** **编辑

我通过添加具有梯度的rectagle并使其为相同的尺寸创造了它div

Answer 5

这里棘手的一点是，您示例中的渐变均匀地映射到文本以及容器。很多人已经显示，将透明渐变映射到背景属性很容易，但这会使文本保持不变。

不幸的是，我认为没有任何直接的方法可以获得您想要的渐变效果而不做任何妥协，具体取决于您的需求，它们可能是有价值的解决方案。因此，为了达到这个目的，下面是两个使用<canvas>的示例，了解如何实现示例图像中显示的效果。

1.作假

Demo on JSLint.

这很简单，你在你的文本块中<canvas>元素位置和完全透明的渐变绘制文本块下方的背景颜色。这不是真的透明，所以它实际上并没有透露下面的任何信息，但如果你试图褪色到一个固定的，预定的颜色，那么这工作得很好。

2.帆布文本

Demo on JSLint

这个例子是比较复杂的，但完全复制在你的例子所示的透明效果。本质上，它完全抛弃HTML文本块，并将整个shabang绘制到<canvas>上。但是，它也有一些缺点：

1. 画布似乎并不喜欢 文字换行，所以你必须指定 各条线。

2. 帆布文本可能仍然有几分低迷浏览器实现。

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

Answer 6

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

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

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