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

【问题标题】：How to apply a CSS gradient over a text, from a transparent to an opaque colour如何在文本上应用 CSS 渐变，从透明到不透明颜色
【发布时间】：2013-01-24 11:22:50
【问题描述】：

干杯！

我是 CSS/HTML 的新手，但我想在文本上应用渐变，如下图所示。如何用 css 实现它？

【问题讨论】：

你试过什么？我认为你提到了opacity，而不是影子。

标签： html css

【解决方案1】：

相关的 CSS 在我使用的 <article> 包装器的伪元素 :after 上

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 */
}

  <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>

【讨论】：

你应该让它的高度固定到底部。因此 80% 的文本将保持可选状态。
如果您需要淡出具有不透明度（即半透明）的图层顶部的文本，这将不起作用。

【解决方案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/

【讨论】：

这是一个很棒的小技巧。据 CanIUse 称，它与英国 95% 的用户和全球 91% 的用户合作。还不错。
这适用于 Chrome、Safari 和 Firefox。如果您仍然需要支持，则不在 IE11 中。一个有趣的注释是，我发现定义这些的顺序实际上很重要。保持背景高于其他

【解决方案3】：

您也可以使用 mask-image 属性执行此操作，但您在 may need to 添加 -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>

【讨论】：