为 div 创建线性透明渐变

Posted 2023-03-06

【中文标题】为 div 创建线性透明渐变

【英文标题】：Creating a linear transparent gradient to a div

【发布时间】：2011-05-02 00:18:55

【问题描述】：

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

【问题讨论】：

可能最稳健的解决方案是在 div 下放一个带渐变的半透明 png。当然，渐变是垂直设置的。

【参考方案1】：

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

【参考方案2】：

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

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

1.假装它

Demo on JSLint.

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

2。画布文字

Demo on JSLint

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

画布似乎不喜欢 换行文本，所以你必须指定 单独的行。

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

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

【参考方案3】：

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

【讨论】：

"对于非 css3 浏览器" ?这里使用的唯一 CSS3 属性是 opacity，它不做任何渐变。其他 3 个属性是特定于供应商的。恕我直言，这不是一个好的解决方案：它不是“面向未来的”，也不是我希望在网络上看到的那种东西。

【参考方案4】：

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

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

【讨论】：

不错的想法和实现+1，但实际上是一场灾难xD

已经有很多更实用的解决方案，我个人主要是好奇能不能用jquery作为主要工具。

【参考方案5】：

我使用 Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/ 创建了这个 喜欢就去看看吧

** 编辑 **

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

【参考方案6】：

为什么不让它保持轻便和浏览器兼容。

div

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

【讨论】：

这是如何创建线性透明渐变的？ gradient.png 不是必须假设它正在褪色的颜色吗？

PNG 可以随着透明度褪色，所以背景颜色设置将是褪色的颜色。

这个解决方案没有回答问题，它不会让Div渐变的内容变成白色，只有背景。

【参考方案7】：

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