使用CSS，你可以应用渐变蒙版来淡化到文本的背景吗？ [英] Using CSS, can you apply a gradient mask to fade to the background over text?

问题描述

我有一个全屏固定的背景图像。我想让滚动div中的文本在顶部淡出，可能是通过在div的顶部应用渐变蒙版到背景。我有兴趣让文本看起来像它在用户向下滚动时消失，但仍然有一个大面积的完全不透明度，用于实际阅读文本。

我知道webkit中有掩码选项，但是我找不到一种方法来淡化页面的背景超过所包含的文本，只将渐变应用到元素的一小部分。希望我已经有足够的描述性了。

谢谢。

解决方案

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

Webkit可以用一行CSS来处理这个问题：

  -webkit-mask-image：-webkit-gradient（linear，left 90％，left bottom，from（rgba（0,0,0,1）），to（rgba（0,0,0,0）） ）
  

这将淡出应用于任何元素的底部10％，而不使用你可以添加 padding-bottom：10％，以确保内容只有在有更多的滚动时才会消失
来源： a href =http://www.webkit.org/blog/181/css-masks/> http://www.webkit.org/blog/181/css-masks/

Mozilla（Gecko）后备软件有点棘手：您可以使用其面具功能，但这需要一个SVG图片。您可以尝试 base64将该图像嵌入您的样式表 ...

I have a full screen fixed background image. I would like the text in my scrolling div to fade out at the top, presumably by applying a gradient mask to the background at only the top part of the div. I'm interested in having the text look like it fades away as it the user scrolls down, but still having a large area of full opacity for actually reading the text.

I know there are masking options in the webkit, but I can't find a way to fade through to the page's background over the contained text only applying the gradient to a small portion of the element.

Hopefully I have been descriptive enough.

Thanks.

解决方案

I've been wondering this exact same thing. The solution is actually quite simple. Although this is of course quite a modern CSS3 feature, so you're stuck to browser compatibility.

Webkit can take care of this with a single line of CSS:

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

This would fade out the bottom 10% of whatever element it's applied to, without using even so much as an image. You could add padding-bottom: 10% to make sure that content is only faded when there is more to scroll to. Source: http://www.webkit.org/blog/181/css-masks/

A Mozilla (Gecko) fallback is a bit trickier though: you can use its 'mask' feature, but this demands a SVG-image. You could try to base64 embed that image into your stylesheet...

这篇关于使用CSS，你可以应用渐变蒙版来淡化到文本的背景吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！