如何在文本上应用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
$ b

  article {
 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屋！