我的混合模式代码片段有问题吗？答案

【问题标题】：Is there something wrong with my mix-blend-mode code snippet?我的混合模式代码片段有问题吗？
【发布时间】：2022-08-09 19:55:34
【问题描述】：

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

如您所见，有相当多的 HTML、CSS (SCSS) 和 JS (Babel)，但我相信相关的代码 sn-p 如下：

<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;
    /* THE mix-blend-mode ABOVE DISPLAYS IN RED */
}

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

</style>

当我发布我的网站时，会显示“CREATIVE”文本，但没有交互式流体元素。我几乎可以肯定这与混合混合模式有关，因为这是唯一显示为红色的代码。我在这里看到过类似的问题，并尝试了所有提供的方法（将主体背景更改为白色，而不是透明；将代码添加为代码块而不是内部标记，但尚未实现工作。我真的很感激任何帮助。

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

webflow 链接有 mix-blend-mode: normal applied
我看不到你的画布元素......你这样做和codepen一样吗？
这很奇怪，当我点击那个链接时，我可以看到 mid-blend-mode: screen applied。在 Webflow 页面中，我的 CSS 在 Inside <head> 标记中，JS 在 Before </body> 标记中（这两者都可以在 FLUID TEXT 页面设置中找到。HTML 在 HTML Embed 2 中（在body block) - 可以通过 Navigator 访问。
canvas 元素位于 FLUID TEXT 页面设置中 - 如果向下滚动，您会看到 Inside <head> 标签，其中包含 CSS（包括 canvas 元素）
我的意思是我看不到 <canvas> 元素，我可以看到你的样式

标签： css blending webflow mix-blend-mode

【解决方案1】：

您可能缺少 js 文件。如果您单击 JS 部分顶部的小设置按钮，您将看到一个名为 https://robindelaporte.fr/codepen/bundle.js 的文件，如果您尚未加载此文件，它将无法正常工作。

【讨论】：