51

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

私はこのチュートリアルや他のチュートリアルを少しフォローしてきましたが、現在のコードは次のとおりです。

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

jsフィドル

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

何か案は？

4

5 に答える 5

57

相対位置要素は通常の 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}

デモ

于 2012-08-07T00:14:47.523 に答える