使用CSS，你可以应用渐变蒙版在文本上淡入背景吗？

Question

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

我知道webkit中有掩蔽选项，但我找不到一种方法可以淡入页面的背景 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使用其新语法。请参阅caniuse.com了解mask-image和linear-gradient。）

这将淡化其应用的任何元素的底部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。

Answer 2

如果您正在淡化为纯色，则可以使用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" alt="don't shoot me">
  </div>

 

Answer 3

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

在此代码段中，我给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>

Answer 4

假设我正确理解您的想法，您可以复制图像的前300个像素，并在Photoshop中对它们应用透明渐变（使顶部完全不透明，底部完全透明）。

然后将此图片放在div或固定在固定图片顶部但具有高z-index的其他元素中。然后主要文本将在您的背景上滚动，但在div叠加下并逐渐淡出，因为叠加层在屏幕顶部变得更加不透明。