web-dev-qa-db-ja.com

透明なdivを持つセクションの下部のテキストをフェードアウトしますが、divをオーバーレイした後、セクションの下に高さが残ります

テキストのセクションの下部に「続きを読む」インジケータとしてニースフェードアウト効果を取得しようとしています。

私は少しオフになっています this と他のチュートリアル、そして私のコードは現在次の通りです：

html

<section>
    <p>malesuada fames ac turpis egestas...leo.</p>                                                                  
    <p>malesuada fames ac turpis egestas...leo.</p>
    <div class="fadeout"></div>
</section>
<p>Stuff after</p>

css

.fadeout {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
}

jsFiddle

問題は、テキストの本文の上に透明なdivを配置しても、「その他のもの」の間に4emのスペースが残っていることです。

何か案は？

csshtml5fadefadeoutfadein
29
whunut

比較的位置の要素は通常のhtmlフローから削除されないため、その要素のために予約された初期スペースを移動しても残りますが、絶対配置ではそうではありません

.fadeout {
    position: absolute; 
    bottom: 0em;
    width:100%;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
} 
section {position:relative}

[〜＃〜] demo [〜＃〜]

49
Musa

パーティーに遅れて来ましたが、これは.fadeout divなしで、::beforeまたは::after疑似要素を使用して行うこともできます。

        section {
            position: relative;
        }

        section::after {
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 15px;
            background: -webkit-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -moz-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -o-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -ms-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
        }
8
cale_b

単純な追加.fade-out「フェードアウト」したい要素に：

.fade-out {
  position: relative;
  max-height: 350px; // change the height
}
.fade-out:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient( rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100% );
}
6
Jeremy Lynch

上記のoverflow:hidden;に.fade-out {}を追加しました。

0
Desiree

bottom: 4em with margin-top: -4em。私に最適です。

0
Mintytail