我可以在div的结尾处淡出文本吗？ [英] Can i fade text out at the end of a div?

问题描述

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

As i scroll how can i fade text out at the top of a div over a background image without the use of an image?

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

I know loads of people will come on here and tell me every reason why i should use an image however can it be done without?

任何建议都将非常感谢...

Any advice would be greatly appreciated...

推荐答案

必须用另一个元素（最好是一个伪元素）覆盖你的div，并且有一个背景梯度，与你的div的背景颜色匹配。

You'll have to overlay your div with another element (preferably a pseudo-element), and have a background-gradient on it, matching your div's background color.

背景是黑色的，你将使用这个：

Assuming your background is black, you'll use this:

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/

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

You'll obviously have to add all those vendor prefixes.

这篇关于我可以在div的结尾处淡出文本吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！