css - CSS3 淡入底部

Question

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

如果我不清楚，让我用一个例子来说明这一点。如果我有一个<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);​

这是一个工作演示。