jquery - 我可以在 div 的末尾淡出文本吗？

Question

当我滚动时，如何在不使用图像的情况下淡出背景图像上 div 顶部的文本？

我知道很多人会来这里告诉我为什么我应该使用图像的每一个原因，但是没有图像可以做到吗？

任何建议将不胜感激...

Answer 1

您必须用另一个元素(最好是伪元素)覆盖您的 div，并在其上设置背景渐变，以匹配您的 div 的背景颜色。

假设你的背景是黑色的，你将使用这个:

div {
    position: relative;
}
div:before {
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 100%);
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
}

这是 fiddle :http://jsfiddle.net/SFYrg/

您显然必须添加所有这些供应商前缀。