如何在文本上应用CSS渐变,从透明到不透明的颜色 [英] How to apply a CSS gradient over a text, from a transparent to an opaque colour
问题描述
干杯!
我是CSS / HTML中的新手,但我想对文本应用渐变,如下图所示。我如何用css实现它?
尝试此示例: http://jsbin.com/iwepas/3/ (在Firefox 18上测试)
相关的CSS位于< article>
包装器的 c>之后 $ 的伪元素
$ b
文章{
position:relative;
}
文章: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; / *,所以文本仍可选择* /
}
输出
请注意:在旧版浏览器上,您可能需要使用从透明到不透明的png背景应用于伪元素其他浏览器需要供应商前缀 linear-gradient
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?
Try this example: http://jsbin.com/iwepas/3/ (tested on Firefox 18)
The relevant CSS is on the pseudoelement :after
of the <article>
wrapper I used
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
这篇关于如何在文本上应用CSS渐变,从透明到不透明的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!