使用 CSS，您可以应用渐变蒙版来淡入文本背景吗？

Posted 2023-02-16

【中文标题】使用 CSS，您可以应用渐变蒙版来淡入文本背景吗？

【英文标题】：Using CSS, can you apply a gradient mask to fade to the background over text?

【发布时间】：2012-03-20 11:30:04

【问题描述】：

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

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

这是所需结果的图像：

【问题讨论】：

阅读本文并关注 totorial：webdesignerwall.com/tutorials/css-gradient-text-effect

谢谢，我在发这个之前就看到了，如果我只是想淡化成白色，但我想淡化成页面的图像背景。

【参考方案1】：

以下是使用现代 mask-image 和 linear-gradient 属性的方法。可悲的是，在 2021 年，并非所有浏览器都完全支持它们。 （有关CSS masks 和linear-gradient，请访问 caniuse.com。）

在这段代码sn-p中，我给html元素赋予了橙色和黄色渐变背景，以证明该方法使用的是真正的透明度，并将其下方的元素用作背景。

html 
  background: linear-gradient(to right, orange, yellow, orange);
  height: 100%;

div 
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));

<div>
One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten
One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten
</div>

【参考方案2】：

我一直在想这完全一样的事情。解决方案其实很简单。虽然这当然是一个相当现代的功能，但你还是会受制于浏览器兼容性。

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。

【讨论】：

强制 - alistapart.com/articles/… :P

非常感谢，这正是我所需要的！

很高兴发现这一点并且在webkit 上运行得非常好。但是，我很难在 Firefox 上实现相同的效果（更不用说 IE）了。您可以提供任何指示或示例吗？我不是 SVG 专家，因此将不胜感激。

对于 Firefox，您可以使用 mask-image 属性。属性值的语法似乎略有不同。

快到 2020 年了，我们仍然没有简单的跨浏览器掩码。这太荒谬了。

【参考方案3】：

如果你要淡化为纯色，你可以使用 psudo 元素：

.image-container 
    position: relative;
    display: inline-block;
  

.image-container:after 
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 55%;
  bottom: 0;
  background: -webkit-linear-gradient(transparent, #FFF) left repeat;
  background: linear-gradient(transparent, #FFF) left repeat; 

<div class="image-container">
  <img src="https://photosharingsites.files.wordpress.com/2014/11/tiger-wild-cat-animal-winter-snow-wallpapers-free-backgrounds.jpg?w=474&h=344" >
  </div>

【讨论】：

为那个婴儿添加一些touch-events: none。 :)

【参考方案4】：

假设我正确理解了您想要的内容，您可以复制图像顶部 300 多个像素，并在 Photoshop 中对其应用透明度渐变（使顶部完全不透明，底部完全透明）。

然后将此图像放在div 或其他一些固定在固定图像顶部但带有高z-index 的元素中。然后，正文将在您的背景上滚动，但在 div 叠加层下方，并随着叠加层在屏幕顶部变得更加不透明而淡出。

【讨论】：

这将是一个很好的解决方案，除了我将整个页面背景缩放到窗口大小的优先级更高。我更希望应用一个遮罩，它会影响我应用它的元素以及其中包含的所有内容，包括文本。