Html 如何在文本上应用 CSS 渐变，从透明颜色到不透明颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14500159/
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
How to apply a CSS gradient over a text, from a transparent to an opaque colour
提问by xamenrax
Cheers!
干杯!
I am a newbie in CSS/HTML, but I want to apply a gradient over a text, like that on the image below. How can I implement it with css?
我是 CSS/HTML 的新手，但我想在文本上应用渐变，如下图所示。我怎样才能用css实现它？
?
?
回答by Fabrizio Calderan
Try this example: http://jsbin.com/iwepas/3/(tested on Firefox 18)
试试这个例子：http: //jsbin.com/iwepas/3/（在 Firefox 18 上测试）
The relevant CSS is on the pseudoelement :afterof the <article>wrapper I used
相关的 CSS 位于我使用:after的<article>包装器的伪元素上
article {
position: relative;
}
article:after {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
content: "";
background: linear-gradient(to top,
rgba(255,255,255, 1) 20%,
rgba(255,255,255, 0) 80%
);
pointer-events: none; /* so the text is still selectable */
}
Output
输出
Please note: on older browser you may need to use a from-transparent-to-opaque png background applied on the pseudoelement while other browser need vendor prefixes for linear-gradient
请注意：在旧浏览器上，您可能需要在伪元素上使用从透明到不透明的 png 背景，而其他浏览器则需要供应商前缀 linear-gradient
回答by The Mechanic
CSS3 text gradients that is only supported by Webkit based browsers like Chrome and Safari. I have used 3 different methods. check this fiddle first http://jsfiddle.net/sarfarazdesigner/pvU7r/Try this
CSS3 文本渐变仅受基于 Webkit 的浏览器（如 Chrome 和 Safari）支持。我使用了 3 种不同的方法。首先检查这个小提琴http://jsfiddle.net/sarfarazdesigner/pvU7r/试试这个
.article{
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
this is working fine in chrome don't know how other browser react. Reference taken from http://css-tricks.com/snippets/css/gradient-text/
这在 chrome 中运行良好，不知道其他浏览器如何反应。参考来自http://css-tricks.com/snippets/css/gradient-text/
