Javascript 一致逐渐褪色的文字效果

建立博客网站，博客文本将逐渐淡出，如下图所示：

在上图中，多行标题不会影响淡出效果，即文本在每篇文章的同一位置开始淡出

在下面的示例中，当标题跨越多行时，淡入效果区域会发生变化

如何保持淡入效果的一致性，而不考虑标头的长度

div.relative{
位置：相对位置；
浮动：左；
宽度：50%；
}
绝对部分{
顶部：0px；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：线性渐变（到底部，rgba（255，255，255，0），rgba（255，255，255，1））
}

这是单行线
Lorem ipsum dolor sit amet，Concetetur Adipsicing Elite。整数的长度等于一个整数。整数ac nunc马萨。这是一个很好的例子。这是我的荣幸。这是一只猫科动物的生命。这是我的爱欲，而不是我的爱。在比本杜姆广场上的魁梧之地，生活是美好的。鲁特鲁姆广场酒店。Nam sagittis sem和leo efficitur，ac lacinia magna luctus
这是多行
Lorem ipsum dolor sit amet，Concetetur Adipsicing Elite。整数的长度等于一个整数。整数ac nunc马萨。这是一个很好的例子。这是我的荣幸。这是一只猫科动物的生命。这是我的爱欲，而不是我的爱。在比本杜姆广场上的魁梧之地，生活是美好的。鲁特鲁姆广场酒店。Nam sagittis sem和leo efficitur，ac lacinia magna luctus

文本和标题的容器应具有固定高度，并且块的其余部分的溢出应隐藏，如：

.container{
     height: 300px;
     overflow: hidden;
}

这将强制相对和绝对div在容器div的末尾结束。

CSS:

.landing-content {
  height: 45px; --> fixed height
  overflow: hidden;  --> do not overflow height with additional content
}

HTML:（

p

）的+类名：

您可以将渐变固定到底部

位置：固定；
底部：0px；

我在这里生成了CSS渐变：

背景：线性渐变(
归根结底，
rgba（2312312260）0%，/*#E7E7E200*/
rgba（2312312261）90%，/*#E7E7E2FF*/
rgba（2312312261）100%/#E7E7E2FF*/
);

.article{
位置：相对位置；
背景：#E7E7E2；
}
.内容{
/*启用以锁定滚动。
*
*溢出：隐藏；
*高度：95vh；
*/
}
.文章.淡出底部{
位置：固定；
底部：0px；
宽度：100%；
高度：75vh；
背景：rgba（2312312260）；
背景：莫兹线性梯度（顶部，rgba（231231226，0）0%，rgba（231231226，1）90%，rgba（231231226，1）100%）；
背景：-webkit渐变（左上，左下，颜色停止（0%，rgba（2312312260）），颜色停止（90%，rgba（2312312261）），颜色停止（100%，rgba（2312312312261））；
背景：-webkit线性梯度（顶部，rgba（231231，231，226，0）0%，rgba（231，231，226，1）90%，rgba（231，231，226，1）100%）；
背景：-o-线性梯度（顶部，rgba（231231226,0）0%，rgba（231231226,1）90%，rgba（231231226,1）100%）；
背景：-ms线性梯度（顶部，rgba（231231226，0）0%，rgba（231231226，1）90%，rgba（231231226，1）100%）；
背景：线性梯度（到底部，rgba（231231226，0）0%，rgba（231231226，1）90%，rgba（231231226，1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#e7e7e2'，endColorstr='#e7e7e2'，GradientType=0）；
}

在文本正文容器上设置固定的

高度

和

oveflow:hidden

（

.relative

），该截图的网站是一个视频游戏新闻和评论博客网站。只是让你知道，文本不会滚动。网站源已将其设置为

溢出：隐藏
。我在下面添加了一个提供滚动的答案。@Ourobrus您的建议起到了作用：）很长一段时间以来，
linear gradient
不需要供应商前缀。（对于IE9仍然需要
filter
）@Ourobrus对于传统浏览器仍然可以使用它们。它不会伤害任何东西。此外，我还生成了渐变。
<div class="relative">
        <p id="landing-content" class="landing-content"><%- blog.body.substring(0,400); %></p>
        <div class="absolute"></div>
</div>