我有一个全屏固定的背景图像。我想让滚动div中的文本在顶部淡出,可能是通过在div的顶部应用渐变蒙版到背景。我有兴趣让文本看起来像它在用户向下滚动时消失,但仍然有一个大区域的完全不透明度实际阅读文本。
我知道webkit中有掩码选项,但是我找不到一个方法来淡化页面的背景,只包含渐变到元素的一小部分。
希望我已经足够描述。
谢谢。
解决方法
@H_301_11@ 我一直在想这个完全相同的事情。解决方案其实很简单。虽然这当然是一个现代的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 …