1

高低を検索してきましたが、 aを使用してタグの下部を白にフェードするCSS3メソッドが見つかりませんでした。linear-gradient<section>

はっきりしない場合は、例を挙げて説明しましょう。テキストがたくさんあるタグを持っている場合は<section>、指定された高さでテキストを切り取ってほしいです。まだまだ読むべきテキストがあることを示すために、コンテナは最後の行かそこらを部分的に覆う白いグラデーションを表示して、読むべきテキストがまだあることを示します。

これはPNGまたはGIFで実行できることは知っていますが、CSS3でこれを実行する方法がわかりません。誰かが例を提供できますか？

お時間をいただきありがとうございます。

4

1 に答える 1

3

追加の要素といくつかの JavaScript を使用してそれを行うことができます。このような：

#some-section {
    position: relative;
}

#some-section .after {
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), white);
    background-image:    -moz-linear-gradient(rgba(255, 255, 255, 0), white);
    background-image:     -ms-linear-gradient(rgba(255, 255, 255, 0), white);
    background-image:      -o-linear-gradient(rgba(255, 255, 255, 0), white);
    background-image:         linear-gradient(rgba(255, 255, 255, 0), white);
    bottom: 0;
    left: 0;
    height: 20px; /* Whatever suits you */
    position: absolute;
    right: 0;
}

そして JavaScript:

var section = document.getElementById('some-section');
var after = document.createElement('div');
after.className = 'after';

section.appendChild(after);

section.addEventListener('scroll', function() {
    after.style.bottom = -section.scrollTop + 'px';
}, false);​

これが実際のデモです。

于 2012-05-23T02:27:15.983 に答える