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

Question

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

我知道webkit中有掩码选项,但我找不到一种方法可以淡化到包含文本的页面背景,只将渐变应用于元素的一小部分.

这是所需结果的图像:

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 for mask-image和linear-gradient.)

这将淡化其应用的任何元素的底部10%,而不使用甚至像图像那么多.您可以添加padding-bottom: 50%以确保仅在滚动到更多内容时内容才会淡出.

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

Mozilla(Gecko)的后备有点棘手:你可以使用它的'mask'功能,但这需要一个SVG图像.您可以尝试将该图像嵌入到样式表中 ...mask-image现在在Firefox中使用.

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年,并非所有浏览器都完全支持它们.(请参阅caniuse.com for mask-image和linear-gradient.)

在这个代码片段中,我给了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

当我需要淡化顶部和底部时，我曾经遇到过这个问题，然后我为我创建了一个简单的生成器，它运行良好，所以我在这里发布了它（css mask生成器），它可能很有用。

（如果您没有使用某些已经检查 caniuse 支持的解析器，则需要使用 -webkit 前缀）

生成器在需要时使用线性渐变和径向渐变，就像@Flimm 的示例一样

顶部和底部淡入淡出示例：

.container {
    height: 200px;
    width: 100%;
    overflow: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 5%, rgba(0, 0, 0, 1) 52%, rgba(0, 0, 0, 1) 44%, transparent 95%);
  }

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus velit et neque sodales, vel malesuada libero pharetra. Phasellus rutrum ligula non nisi porttitor commodo. Sed mattis nibh metus, ac tristique augue iaculis vitae. Nam et finibus nulla. Morbi ornare vulputate interdum. Vivamus ultricies libero at sapien posuere, id luctus lacus facilisis. Praesent egestas tristique arcu a facilisis. Donec cursus, purus et convallis facilisis, velit erat vestibulum ligula, at porta nunc nunc tempor massa. Suspendisse lorem mauris, tincidunt in erat nec, ultricies viverra tellus. Praesent ligula ante, maximus ut orci a, pretium convallis diam. Nunc eget magna consectetur nisl ultrices feugiat et a eros. Pellentesque vitae lectus libero. Nulla sed dignissim nulla, rutrum fermentum sapien. Vestibulum aliquet, neque elementum pharetra mollis, velit libero ullamcorper leo, sed mattis elit lectus sed libero.</p>
</div>