如何应用具有透明到白色渐变的淡出文本效果？

Question

我想创建一种淡出文章底部的效果（类似于 wsj.com 文章的效果）。我添加了一个 #transparent div 渐变背景，变得不那么透明了。然而，背景并没有盖住文字，所以白色背景不会出现。我怎样才能修复它，让白色覆盖文字？

#translucent{
  margin-top: -100px;
  content: "";
  height: 110px;
  z-index: 2;
  width: 100%;
  positon: relative;
  background: -webkit-linear-gradient(top, rgba(256,256,256,0) 0%,rgba(256,256,256,0.5) 90%,rgba(256,256,256,1) 100%); 
}

<div>
  <p>
    The quick brown fox jumps over a lazy dog </p>
    <p>
    The quick brown fox jumps over a lazy dog </p>
    <p>
</div>
<div id="translucent"> 
</div>

（将颜色更改为黑色会实现淡化为黑色的效果，但我希望文本淡化为白色。）

Answer 1

看起来将 positon: relative; 更改为 position: absolute; 可以解决问题。

如何应用具有透明到白色渐变的淡出文本效果？

How can I apply a fade-out-text effect with a transparent-to-white gradient?

html

css

z-index

transparency