Question

我正在尝试在后台使用带有 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);
}

Answer 1

它是一个 bug 1708444，它应该在 v. 89 中得到修正。

是什么导致了 Firefox 上 .mp4 的“混合模式模式”中的错误？

1 个答案: