javascript 为 div 创建线性透明渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4045319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a linear transparent gradient to a div
提问by JohnDel
I'd like to create a linear transparent gradient to a div. Is there any way to do that with jquery? Or should I use some other library like raphaeljs? I'd like to achieve an effect like the following:
我想为 div 创建一个线性透明渐变。有没有办法用 jquery 做到这一点？或者我应该使用其他一些库，比如 raphaeljs？我想达到如下效果：
回答by Dustin Laine
Why not keep it light and browser compatible.
为什么不让它保持轻便和浏览器兼容。
div
{
backgroud-image: url('images/gradient.png');
background-repeat: repeat-x;
background-position: top right;
}
回答by Christian Tellnes
You can do it with CSS3:
你可以用 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://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
http://www.colorzilla.com/gradient-editor/
http://www.colorzilla.com/gradient-editor/
回答by generalhenry
I created it using jquery and 112 divs. A parent div for the ten lines of text divs each more transparent, and a background div with 100 divs each more transparent.
我使用 jquery 和 112 个 div 创建了它。十行文本 div 的父 div 每个更透明，背景 div 具有 100 个 div，每个更透明。
回答by Daniel Mendel
The tricky bit here is that the gradient in your example is evenly mapped to the text as well as the container. It's easy to map a transparent gradient to the background property, as lots of people have shown, but that will leave the text unchanged.
这里的棘手之处在于示例中的渐变被均匀地映射到文本和容器。正如很多人所展示的那样，将透明渐变映射到背景属性很容易，但这会使文本保持不变。
Unfortunately, I don't think there's any straightforward way to get the gradient effect that you want without making some compromises, depending on your needs they may be worthwhile solutions. So to that end, here are two examples of how to achieve the effect shown in your example image, both using the <canvas>.
不幸的是，我认为没有任何直接的方法可以在不做出一些妥协的情况下获得您想要的渐变效果，根据您的需要，它们可能是值得的解决方案。为此，这里有两个示例说明如何实现示例图像中显示的效果，均使用<canvas>.
1. Faking it
1. 伪装
This is simple, you position a <canvas>element over your text block and draw in a gradient from fully transparent to the color of the background below the text block. It's not really transparent, so it doesn't actually reveal any information below, but if you're trying to fade to a solid, predetermined color, then this works pretty well.
这很简单，您将一个<canvas>元素放置在文本块上，并绘制从完全透明到文本块下方背景颜色的渐变。它并不是真正透明，因此它实际上不会显示下面的任何信息，但是如果您尝试淡化为纯色的预定颜色，那么这很有效。
2. Canvas text
2. 画布文字
This example is more complicated, but fully replicates the transparent effect shown in your example. Essentially, it ditches the HTML text block entirely, and just draws the whole shabang onto the <canvas>. However, it has some downsides:
此示例更复杂，但完全复制了示例中显示的透明效果。本质上，它完全抛弃了 HTML 文本块，而只是将整个 shabang 绘制到<canvas>. 但是，它有一些缺点：
The canvas doesn't seem to like wrapping text, so you'd have to specify individual lines.
Canvas text may still have somewhat murky browser implementations.
Accessibility & SEO, though you could easily write a jQuery plugin for transforming regular DOM elements with text into this solution at runtime.
画布似乎不喜欢换行文本，因此您必须指定单独的行。
画布文本可能仍然有一些模糊的浏览器实现。
可访问性和 SEO，尽管您可以轻松编写 jQuery 插件，以便在运行时将带有文本的常规 DOM 元素转换为该解决方案。
回答by Lixus
As bArmageddon pointed out, the accepted solution does not solve the problem - it just fades the background. A simple solution would be to use :before or :after to add the gradient over the text:
正如 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;
}
回答by Sarfraz
Not sure what exactly you are looking for but take a look at Gradienter jQuery plugin.
不确定您到底在寻找什么，但请查看Gradienter jQuery 插件。
回答by pahnin
I created this using Raphael js http://www.jsfiddle.net/pahnin/fsdnW/4/checkout if u like it
我使用 Raphael js 创建了这个http://www.jsfiddle.net/pahnin/fsdnW/4/checkout 如果你喜欢它
** edit **
** 编辑 **
I created it by adding a rectagle with gradient and making it as same size as the div
我通过添加一个带有渐变的矩形并使其与 div 的大小相同来创建它
