如何将CSS渐变应用于文本,从透明到不透明的颜色

前端之家收集整理的这篇文章主要介绍了如何将CSS渐变应用于文本,从透明到不透明的颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
干杯!

我是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背景,而其他浏览器需要线性梯度的供应商前缀

猜你在找的CSS相关文章