一貫徐々に色あせたテキストエフェクトブログのテキストが徐々に以下の画像のように色あせされるブログサイト、建物

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グラデーションを生成：テキスト本文コンテナのhidden`（ `.relative：固定` height`と `oveflowを設定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>