我有一个全屏固定的背景图像。我想让滚动div中的文本在顶部淡出，可能是通过在div的顶部应用渐变蒙版到背景。我有兴趣让文本看起来像它在用户向下滚动时消失，但仍然有一个大区域的完全不透明度实际阅读文本。
我知道webkit中有掩码选项，但是我找不到一个方法来淡化页面的背景，只包含渐变到元素的一小部分。
希望我已经足够描述。
谢谢。
解决方法
我一直在想这个完全相同的事情。解决方案其实很简单。虽然这当然是一个现代的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 …
原文地址：https://www.jb51.cc/css/220688.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
