使用CSS,你可以应用渐变蒙版来淡化到文本的背景吗?

前端之家收集整理的这篇文章主要介绍了使用CSS,你可以应用渐变蒙版来淡化到文本的背景吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个全屏固定的背景图像。我想让滚动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

猜你在找的CSS相关文章