CSS:使用“背景剪辑:文本"和线性渐变的浏览器兼容性问题 [英] CSS: browser compatibility issues using 'background-clip: text' and linear-gradient

问题描述

我正在尝试在滚动上创建淡入淡出的文本效果，其中元素顶部和底部的文本是透明的，但中间的文本仍然是完全不透明的.在视频背景上还可以无限滚动文本.由于难以解释效果，因此，下面是到目前为止仅在Chrome上有效的效果演示:

I am attempting to create a faded text effect on scroll where the text at the top and bottom of the element are transparent but the text in the center remains fully opaque. There is also infinitely scrolling text over a video background. Because it is not easy to explain the effect, here is a demo of the effect working only on Chrome so far:

正在运行的演示: http://dboxcg.dev.dbox.com/portfolio

它可以在chrome(v81.0.4)上运行，但无法在Firefox，Safari和所有移动浏览器上运行.

It's working on chrome (v81.0.4) but breaking on firefox, safari and all mobile browsers.

以下是上面演示的代码:

Here is the code for the above demo:

.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上运行上述功能:淡出图像上的文本

I was able to get the above working on Chrome via the answers in this question: Fade out text on image

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

mask-image looks like the right CSS property but I am running into an issue of the infinitely scrolling text in my example.

是否可以通过这种方式获得跨浏览器的兼容性?

Is it possible to get some semblance of cross-browser compatibility for this effect?

推荐答案

以下是使用遮罩的方法.诀窍是有两层.在蒙版下方使用一个文字，在蒙版上方使用一个文字.

Here is how it can be done using mask. The trick is to have two layers. One below the text and the same above the text where you apply the mask.

这是我使用和图像的示例，但是您可以像在示例中一样使用视频来实现

Here is an example where I used and image but you can do it with a video like you did in your example

.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>

这篇关于CSS:使用“背景剪辑:文本"和线性渐变的浏览器兼容性问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！