我的 mix-blend-mode 代码片段有什么问题？

Question

我一直在尝试（在 Webflow 中）从以下代码笔中模拟这个漂亮的“流动文本悬停”： https://codepen.io/robin-dela/pen/KKPYoBq

如您所见，有相当数量的 HTML、CSS (SCSS) 和 JS (Babel)，但我相信相关的代码片段如下：

<style>
body {
    position: fixed;
    height: 100%;
  overflow: hidden;
}

canvas {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.mask {
    position: absolute;
    z-index: 2;
    background: white;
    height: 100vh;
    width: 100vw;
    mix-blend-mode: screen;
    /* display: none; */
}

svg {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

我将 HTML 代码复制到我页面上嵌入的代码块中，将 CSS 复制到页面设置的内部 head 标记中，将 JS 复制到页面设置的 before body 标记中。 当我发布我的网站时，会显示“创意”文本，但没有交互式流体元素。 我几乎可以肯定它与 mix-blend-mode 有关，因为这是唯一以红色显示的代码。 我在这里看到过类似的问题，并尝试了所有提供的方法（将主体背景更改为白色，而不是透明；将代码添加为代码块而不是 Inside 标签，但目前还没有成功工作。我真的很感激任何帮助。

我的 Webflow 网站只读可以在这里找到： https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c260c50afefeed

Answer 1

   .container {
      background-color: red;
    }

    .container img {
      mix-blend-mode: darken;
    }

这就是它的工作原理容器应该有背景颜色来混合子图像中的背景颜色

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

参考： https://www.w3schools.com/cssref/pr_mix-blend-mode.asp