动态 SCSS 溢出修剪答案

【问题标题】：Dynamic SCSS Overflow trimming动态 SCSS 溢出修剪
【发布时间】：2022-01-11 11:49:25
【问题描述】：

我发现了一个有趣的 SCSS 示例 dynamic moving background colors, Floating Stained Glass Effect。想想多色熔岩灯。这是原来的codepen.

我想要实现的是该背景内容的简单“剪辑”，并显示具有动态颜色内容的 div...我当前的codepen 和显示。

我正在寻找的是仅在刻有“框”的动态内容，屏幕上的其他所有内容都是纯白色的。

   <div class="splash box">
      <div class="splash_head" />
      <div class="splash_body" />
   </div>

我在overflow: hidden; 的所有尝试都惨遭失败。不知道如何击败 position: fixed; 内的代码

.splash_head::before,
.splash_head::after,
.splash_body::before,
.splash_body::after {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: "V";
  mix-blend-mode: screen;
  animation: 44s -27s move infinite ease-in-out alternate;
}

【问题讨论】：

标签： html css sass

【解决方案1】：

事实证明，如果我用一个额外的环绕容器包装内容，我就能得到我想要的。

<div class="surround">
  <div class="splash box">
    <div class="splash_head" />
    <div class="splash_body" />
  </div>
</div>

SCSS：

.surround {
  background-color: white;
  padding: 10%;
  height: 100vh;
}

而且看起来很漂亮。

不幸的是，所写的这个例子是一个最低限度的问题陈述。在静态 HTML 网页中，这些 div 容器可以很好地工作。不幸的是，我的实际用例是一个复杂的 SvelteKit 应用程序，带有嵌套插槽，其中颜色渗出很糟糕。目前尚不清楚这是 z-index 问题还是其他问题。但是，是的，它很丑，叹息。

这里的另一个问题是漂亮的熔岩灯的东西是一个显着的灯塔网站排名性能下降。（71 下降到 63）在这一点上，不确定是否值得花时间。我可能只是创建一个静态站点，抓取一些漂亮图片的屏幕截图并使用它们静态。我真的只是在寻找一种微妙而有趣的色彩。

【讨论】：