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

Using CSS, can you apply a gradient mask to fade to the background over text?

提问by aviemet

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.

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

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

我知道 webkit 中有遮罩选项，但我找不到一种方法来淡入页面的背景，仅将渐变应用于元素的一小部分。

Here's an image of the desired result:

这是所需结果的图像：

回答by Adrian van Vliet

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

我一直在想这完全相同的事情。解决方法其实很简单。尽管这当然是一项非常现代的功能，但您仍然坚持浏览器兼容性。

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

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

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

(The new standardised way of doing it is would use mask-imageand linear-gradientusing its new syntax. See caniuse.com for mask-imageand linear-gradient.)

（新的标准化方法是使用mask-image并linear-gradient使用其新语法。请参阅 caniuse.com 了解mask-image和linear-gradient。）

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: 50%to make sure that content is only faded when there is more to scroll to.

这将淡出它所应用到的任何元素的底部 10%，甚至不使用图像。您可以添加padding-bottom: 50%以确保只有在有更多内容可供滚动时才会褪色。

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

来源：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...Use mask-imagein Firefox now.

不过，Mozilla (Gecko) 回退有点棘手：您可以使用其“掩码”功能，但这需要 SVG 图像。您可以尝试将base64 图像嵌入到您的样式表中……mask-image现在在 Firefox 中使用。

回答by ecolema

If you're fading to a solid color, you can use a psudo element:

如果您正在褪色为纯色，则可以使用 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>

回答by Flimm

Here's how you can do it using modern mask-imageand linear-gradientproperties. Sadly, in 2018, they are not completely supported in all browsers. (See caniuse.com for mask-imageand linear-gradient.)

以下是如何使用现代mask-image和linear-gradient属性来做到这一点。遗憾的是，在 2018 年，并非所有浏览器都完全支持它们。（有关mask-image和 ，请参阅 caniuse.com linear-gradient。）

In this code snippet, I've given the htmlelement an orange and yellow gradient background, to prove that this method is using real transparency and uses the element underneath it as background.

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

回答by Gareth

Assuming I'm understanding what you want correctly, you could duplicate the top 300ish pixels of your image and apply a transparency gradient to them in Photoshop (making the top completely opaque and the bottom completely transparent).

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

Then place this image in a divor some other element fixed over at the top of the fixed image but with a high z-index. The main text would then scroll over your background but under the divoverlay and fade out as the overlay becomes more opaque towards the top of the screen.

然后将此图像放置div在固定图像顶部的a或其他元素中，但z-index. 然后，正文将在您的背景上滚动，但在div覆盖层下方并随着覆盖层向屏幕顶部变得更加不透明而逐渐淡出。