<section> 的 CSS3 淡入底部

Question

我一直在寻找高低，但我没有找到使用linear-gradient 将<section> 标记的底部淡化为白色的CSS3 方法。

如果我不清楚，让我用一个例子来说明这一点。如果我有一个充满大量文本的<section> 标签，我希望在指定高度将文本截断。为了显示还有更多的文本要阅读，容器会显示一个白色渐变，部分覆盖最后一行左右，以表明还有更多的文本要阅读。

我知道这可以用 PNG 或 GIF 来完成，但我不知道如何用 CSS3 来做到这一点。有人可以举个例子吗？

感谢您的宝贵时间。

Answer 1

你可以用一个额外的元素和一些 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);​

Here's a working demo.