一致的逐渐淡化的文字效果

Question

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

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

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

无论标题的长度如何，如何保持淡入淡出效果一致？

div.relative {
  position: relative;
  float: left;
  width: 50%;
}
div.absolute {
  top: 0px;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}

<div class="relative">
  <h1>This is a single line</h1>
  <p id="landing-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend consequat mi eget pretium. Integer ac nunc massa. Proin dapibus et nunc vel luctus. Nulla quis justo et nisi mollis congue. Etiam consectetur nunc a felis aliquet finibus id ut arcu. Fusce faucibus eros ut ante faucibus aliquet. Quisque maximus arcu in quam bibendum, vitae luctus justo dapibus. Praesent ac rutrum quam. Nam sagittis sem et leo efficitur, ac lacinia magna luctus.</p>
  <div class="absolute"></div>
</div>
<div class="relative">
  <h1>This is<br>multiple lines</h1>
  <p id="landing-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend consequat mi eget pretium. Integer ac nunc massa. Proin dapibus et nunc vel luctus. Nulla quis justo et nisi mollis congue. Etiam consectetur nunc a felis aliquet finibus id ut arcu. Fusce faucibus eros ut ante faucibus aliquet. Quisque maximus arcu in quam bibendum, vitae luctus justo dapibus. Praesent ac rutrum quam. Nam sagittis sem et leo efficitur, ac lacinia magna luctus.</p>
  <div class="absolute"></div>
</div>

编辑：我为标题和文本容器类设置了固定高度：

caption {
  height: 70px;
  overflow: hidden;
}

div.relative {
  position: relative;
  font-size: 13px;
  height: 120px;
  overflow: hidden;
  text-align: justify;
} 

它有所帮助，但还有另一个问题：

[Here's how it looks now] 2 标题和日期之间有空格（因为我为标题类设置了固定高度）。如何在保持褪色效果完好的同时处理空白？

Answer 1

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

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

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

Answer 2

CSS：

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

HTML :( + p的类名称）：

<div class="relative">
        <p id="landing-content" class="landing-content"><%- blog.body.substring(0,400); %></p>
        <div class="absolute"></div>
</div>

Answer 3

您可以将渐变固定在底部。

position: fixed;
bottom: 0px;

我在这里生成了CSS Gradient：http://www.cssmatic.com/gradient-generator

background: linear-gradient(
  to bottom,
  rgba(231, 231, 226, 0) 0%,  /* #E7E7E200 */
  rgba(231, 231, 226, 1) 90%, /* #E7E7E2FF */
  rgba(231, 231, 226, 1) 100% /* #E7E7E2FF */
);

.article {
  position: relative;
  background: #E7E7E2;
}
.content {
  /* Enable to lock scrolling.
   *
   * overflow: hidden;
   * height: 95vh;
  */
}
.article .fade-bottom {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 75vh;
  background: rgba(231, 231, 226, 0);
  background: -moz-linear-gradient(top, rgba(231, 231, 226, 0) 0%, rgba(231, 231, 226, 1) 90%, rgba(231, 231, 226, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(231, 231, 226, 0)), color-stop(90%, rgba(231, 231, 226, 1)), color-stop(100%, rgba(231, 231, 226, 1)));
  background: -webkit-linear-gradient(top, rgba(231, 231, 226, 0) 0%, rgba(231, 231, 226, 1) 90%, rgba(231, 231, 226, 1) 100%);
  background: -o-linear-gradient(top, rgba(231, 231, 226, 0) 0%, rgba(231, 231, 226, 1) 90%, rgba(231, 231, 226, 1) 100%);
  background: -ms-linear-gradient(top, rgba(231, 231, 226, 0) 0%, rgba(231, 231, 226, 1) 90%, rgba(231, 231, 226, 1) 100%);
  background: linear-gradient(to bottom, rgba(231, 231, 226, 0) 0%, rgba(231, 231, 226, 1) 90%, rgba(231, 231, 226, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e7e7e2', endColorstr='#e7e7e2', GradientType=0);
}

<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div class="article">
  <div id="paragraphs" class="content" data-lorem="10"></div>
  <div class="fade-bottom"></div>
</div>