Question

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

如果我不清楚，让我举一个例子来说明这一点。如果我有一个充满大量文本的<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.

CSS3淡出<section> </section>的底部

1 个答案: