创建到div的线性透明渐变

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

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

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

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

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

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

不幸的是,我不认为有任何直接的方法可以得到你想要的梯度效果而不做一些妥协,这取决于你的需要,它们可能是值得的解决方案。因此,这里有两个例子说明如何实现示例图像中显示的效果,两个例子都使用 <canvas> .

一。假亦真

Demo on JSLint.

很简单,你的位置是 <画布> 元素覆盖文本块,并以从完全透明到文本块下背景颜色的渐变方式绘制。它不是真正透明的,所以它实际上不会显示下面的任何信息,但如果你试图淡入到一个坚实的,预定的颜色,那么这个工作得很好。

2。画布文本

Demo on JSLint

这个例子比较复杂,但是完全复制了例子中显示的透明效果。实际上,它完全抛弃了HTML文本块,只将整个shabang绘制到 < . 然而,它也有一些缺点:

1. 画布好像不喜欢 包装文本,因此必须指定 各条线。

3. 可访问性&SEO,不过您可以轻松编写jQuery插件,以便在运行时将带有文本的常规DOM元素转换为此解决方案。

不知道你到底在找什么,但看看 Gradienter jQuery plugin .

我用Raphael js创建了这个 http://www.jsfiddle.net/pahnin/fsdnW/4/

**编辑**

我创建它的方法是添加一个带有渐变的矩形,并使其大小与div相同

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