我有一个全屏固定的背景图像。我想让滚动div中的文本在顶部淡出，可能是通过在div的顶部应用渐变蒙版到背景。我有兴趣让文本看起来像它在用户向下滚动时消失，但仍然有一个大区域的完全不透明度实际阅读文本。
我知道webkit中有掩码选项，但是我找不到一个方法来淡化页面的背景，只包含渐变到元素的一小部分。
希望我已经足够描述。
谢谢。
解决方法@H_403_10@
我一直在想这个完全相同的事情。解决方案其实很简单。虽然这当然是一个现代的CSS3功能，所以你坚持浏览器兼容性。
Webkit可以用一行CSS来处理这个问题：
-webkit-mask-image: -webkit-gradient(linear,left 90%,left bottom,from(rgba(0,1)),to(rgba(0,0)))"
这将淡出所应用的任何元素的底部10％，而不使用甚至作为图像。您可以添加padding-bottom：10％，以确保内容只有褪色时，有更多的滚动到。
资料来源：http://www.webkit.org/blog/181/css-masks/
Mozilla(Gecko)回退有点棘手：虽然可以使用its ‘mask’ feature，但这需要一个SVG图像。你可以尝试base64 embed that image into your stylesheet …
Webkit可以用一行CSS来处理这个问题：
-webkit-mask-image: -webkit-gradient(linear,left 90%,left bottom,from(rgba(0,1)),to(rgba(0,0)))"
这将淡出所应用的任何元素的底部10％，而不使用甚至作为图像。您可以添加padding-bottom：10％，以确保内容只有褪色时，有更多的滚动到。
资料来源：http://www.webkit.org/blog/181/css-masks/
Mozilla(Gecko)回退有点棘手：虽然可以使用its ‘mask’ feature，但这需要一个SVG图像。你可以尝试base64 embed that image into your stylesheet …
