如何在文本上應用 CSS 漸變，從透明顏色到不透明顏色

Question

干杯!

我是 CSS/HTML 的新手，但我想在文本上應用漸變，如下圖所示。 我怎樣才能用css實現它？

---

Answer 1

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

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

Answer 2

CSS3 文本漸變僅受基於 Webkit 的瀏覽器（如 Chrome 和 Safari）支持。 我使用了 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/