问题描述
我正在尝试在后台使用带有 mp4 的混合模式。这个想法是让 div 带有一些文本,并在背景中播放视频以对字母产生影响。这适用于除 Firefox 之外的所有浏览器。
在 Firefox 上,视频在后台播放,但 mix-blend-mode 似乎没有任何效果。文字只是黑色。这是奇怪的部分:如果我打开检查器动画开始工作,但只有一次。我认为这可能是一个权限问题并允许自动播放,但这并没有解决问题。我一直无法找到导致错误的原因。任何建议或黑客将是最受欢迎的 :)
我已经在 gitHub 上提供了这一点,并在 netlify 上直播。这是 netlify 上 github 和 live version 的存储库。如果你想看清楚。
HTLM 位如下所示:
function App() {
return (
<div className="scroll-container">
<video className="background-video" autoplay="autoplay" muted loop>
<source src={video} type="video/mp4" />
</video>
<div className="wrapper">
<div className="header">
THE CREATIVE
<br />
WEB AGENCY
<br />
DESIGN/CODE
</div>
</div>
</div>
);
}
这里是css:
.text {
overflow-y: scroll;
overflow-x: hidden;
background: rgb(255,255,255);
color: black;
z-index: 1;
mix-blend-mode: screen;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
mix-blend-mode: screen;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1);
}
解决方法
它是一个 bug 1708444,它应该在 v. 89 中得到修正。