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;
}

这是小提琴：http://jsfiddle.net/SFYrg/

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

Answer 2

如果您不想使用图像，则可以在div上使用渐变，而div将叠加在内容div的顶部。

您可以使用http://www.colorzilla.com/gradient-editor/快速生成渐变，并使用所有特定于浏览器的前缀。

Answer 3

  $("myElement").fadeOut("slow");

将文本放入某种容器中并使用jQuery淡出。你不需要任何图像。

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

3 个答案: