CSS：使用“背景剪辑：文本”和线性渐变的浏览器兼容性问题

Question

我正在尝试在滚动上创建褪色文本效果，其中元素顶部和底部的文本是透明的，但中心的文本仍然完全不透明。视频背景上还有无限滚动的文本。由于效果不好解释，这里是目前只在 Chrome 上运行的效果演示：

工作演示：http://dboxcg.dev.dbox.com/portfolio

它在 chrome (v81.0.4) 上运行，但在 firefox、safari 和所有移动浏览器上中断。

这是上面演示的代码：

.container {
  background:linear-gradient(rgba(255,255,255,0) 10%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-attachment: fixed;
}

.video-background {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="container">
  <ul>
     <li><a href="/portfolio/108_leonard">108 LEONARD</a></li>
     <li><a href="/portfolio/20_grosvenor_square">20 GROSVENOR SQUARE</a></li>
     <li><a href="/portfolio/25_park_row">25 PARK ROW</a></li>
     <li><a href="/portfolio/432_park_avenue">432 PARK AVENUE</a></li>
     <li><a href="/portfolio/57_ocean">57 OCEAN</a></li>
     <li><a href="/portfolio/aerials">AERIALS</a></li>
     <li><a href="/portfolio/animations_films">ANIMATIONS / FILMS</a></li>
     <li><a href="/portfolio/bathrooms">BATHROOMS</a></li>
     <li><a href="/portfolio/bedrooms">BEDROOMS</a></li>
     <li><a href="/portfolio/human_models_in_cg">HUMAN MODELS IN CG</a></li>
     <li><a href="/portfolio/institutions">INSTITUTIONS</a></li>
  </ul>
  <div class="video-background">
    <video src="https://player.vimeo.com/external/111111.hd.mp4" style="width: 100%; height: 100%;" preload="auto" autoplay="" loop="" playsinline="" webkit-playsinline="" x5-playsinline=""></video>
  </div>
</div>

我能够通过以下问题的答案在 Chrome 上运行上述内容： Fade out text on image

mask-image 看起来像是正确的 CSS 属性，但我在示例中遇到了无限滚动文本的问题。

是否有可能为这种效果获得一些跨浏览器兼容性？

Answer 1

下面是使用掩码的方法。诀窍是有两层。一个在文本下方，在应用蒙版的文本上方相同。

这是我使用图像的示例，但您可以像在示例中那样使用视频来完成

.box {
  padding:0 100px;
  font-size:50px;
  font-weight:bold;
  color:#fff;
}

html {
  min-height:100%;
  background:url(https://picsum.photos/id/1074/1000/1000) center/cover fixed;
}
html:before {
  content:"";
  position:fixed;
  z-index:99;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://picsum.photos/id/1074/1000/1000) center/cover fixed;
  -webkit-mask: linear-gradient(#fff,transparent 30% 70%,#fff);
          mask: linear-gradient(#fff,transparent 30% 70%,#fff);
}

<div class="box">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac venenatis enim. Suspendisse vestibulum mattis finibus. Ut velit metus, pulvinar id elementum nec, tempus et mi. Phasellus consequat mauris nisi, a iaculis nulla molestie eget. Praesent velit arcu, consectetur ac arcu ac, volutpat laoreet erat. Nulla eu est dui. Pellentesque ultricies finibus velit sit amet feugiat. Integer posuere mauris eu faucibus laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam in ullamcorper dui. Nunc fermentum scelerisque metus cursus tincidunt. Phasellus tortor justo, gravida eget mi sed, condimentum placerat neque. Vivamus fermentum quam a tincidunt placerat. Pellentesque quis dictum odio.
</div>