css - 使用 CSS，您可以应用渐变 mask 来淡化文本上的背景吗？

Question

我有一张全屏固定背景图片。我希望我的滚动 div 中的文本在顶部淡出，大概是通过仅在 div 的顶部对背景应用渐变蒙版。我感兴趣的是让文本看起来像在用户向下滚动时逐渐消失，但仍然有大面积的完全不透明区域来实际阅读文本。

我知道 webkit 中有 mask 选项，但我找不到淡入页面背景的方法over 包含的文本仅将渐变应用于元素的一小部分.

这是所需结果的图像:

Answer 1

我一直在想这完全相同的事情。解决方法其实很简单。虽然这当然是一个相当现代的功能，所以您必须坚持浏览器兼容性。

Webkit 可以用一行 CSS 来解决这个问题:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

(新的标准化方法是使用 mask-image 和 linear-gradient 并使用其新语法。有关 mask-image 和 linear-gradient 的信息，请参见 caniuse.com。)

这会淡出应用它的任何元素的底部 10%，甚至不使用图像。您可以添加 padding-bottom: 50% 以确保仅当有更多内容需要滚动时内容才会淡出。

来源:http://www.webkit.org/blog/181/css-masks/

虽然 Mozilla (Gecko) 回退有点棘手:您可以使用 its 'mask' feature ，但这需要 SVG 图像。您可以尝试 base64 embed that image into your stylesheet ... 现在在 Firefox 中使用 mask-image。