在固定背景上消失文本效果

Question

我想知道如何创建消失的文本效果，如site上的文字“DESTINATIONS”。我知道如何通过

创建固定的背景效果

background-attachment: fixed;
background-repeat: no-repeat;

但我不知道哪些属性需要添加到文本中。我看到文本应该有position: absolute;但是当我们滚动并且文本消失时它不会给我这样的效果。

Answer 1

该文本显然具有position: fixed，它修复了与视口/窗口相关的位置，而不是与任何其他HTML元素相关。

为了让它被滚动元素覆盖，最简单的方法是给它一个负的z-index值，比如z-index: -1;那样它将被其他没有z-index的元素覆盖

具有该文本背后图像的元素需要更大的负z-index才能保持在其下面。它显然也有position: fixed。

（所有这些都没有查看代码，可能会略有不同，但这是以这种方式工作的最常见方式）