CSS3 Fade Bottom of <セクション> - css、css3、background、background-image、linear-gradients

私は高値と安値を検索していますが、私は見つけていません CSS3 を使用する方法 linear-gradient の底を消す <section> 白にタグを付けます。

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

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

あなたの時間をありがとう。

回答：

追加の要素といくつかの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);​

これが実用的なデモです。