干杯!
我是CSS / HTML中的新手,但我想在文本上应用渐变,如下图所示。如何用css实现它?
解决方法
尝试这个例子:
http://jsbin.com/iwepas/3/(在Firefox 18上测试)
相关的CSS在伪元素上:在< article>我使用的包装纸
article { position: relative; } article:after { position: absolute; bottom: 0; height: 100%; width: 100%; content: ""; background: linear-gradient(to top,rgba(255,255,1) 20%,0) 80% ); pointer-events: none; /* so the text is still selectable */ }
产量
请注意:在较旧的浏览器上,您可能需要使用从伪元件应用的透明到不透明的png背景,而其他浏览器需要线性梯度的供应商前缀