如何在文本上应用CSS渐变,从透明颜色到不透明颜色

Question

干杯!

我是CSS/HTML的新手,但我想在文本上应用渐变,如下图所示.我怎样才能用css实现它？

---

 

Answer 1

试试这个例子:http://jsbin.com/iwepas/3/(在Firefox 18上测试)

相关的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 */
}

产量

请注意:在较旧的浏览器上,您可能需要使用在伪元素上应用的透明到不透明的png背景,而其他浏览器需要供应商前缀 linear-gradient

Answer 2

只有基于Webkit的浏览器(如Chrome和Safari)支持的CSS3文本渐变.我使用了3种不同的方法.首先检查这个小提琴http://jsfiddle.net/sarfarazdesigner/pvU7r/ 试试这个

.article{
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

这在chrome中工作正常,不知道其他浏览器如何反应.参考来自http://css-tricks.com/snippets/css/gradient-text/

Answer 3

您也可以使用mask-image属性来执行此操作，但您可能需要添加-webkit-前缀。

article {
  -webkit-mask-image: linear-gradient(0deg, transparent 16px, red 66px);
  /* 0deg = down, 90deg = left, 180deg = top, 270deg = right */
}

  <article>
      <p>
         Had you stepped on board the Pequod at a certain juncture 
         of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers. Had you stepped on board the Pequod at a certain 
         juncture of this post-mortemizing of the whale; and had you strolled
         forward nigh the windlass, pretty sure am I that you would
         have scanned with no small curiosity a very strange, enigmatical 
         object, which you would have seen there, lying along lengthwise 
         in the lee scuppers.
      </p>
  </article>