Question

我希望创建一种效果来淡出文章的底部（类似于对wsj.com文章的影响）。我添加了一个#transparent div，其渐变背景变得不那么透明了。但是，背景并不掩盖文本，因此白色背景不会显示。如何修复它以使白色覆盖文本？

＆＃13;

#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%); 
}

＆＃13;

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

＆＃13;

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

Answer 1

将positon: relative;更改为position: absolute;似乎解决了问题。

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

1 个答案: