如何解决我的CSS背景的这个问题？

Question

所以，我是 HTML 新手。我得到了我喜欢的背景的 CSS 代码。 我希望它在后台保持静态，而我的“内容”在其上正常滚动。

这可能吗？

我是 HTML 和 CSS 新手，我得到的代码就像代码一样，我认为这不是背景。

这是我的 HTML 代码：

<div class="blur-container"
style="--blur:12vw;">

<div class="shape" 
  style="--path:polygon(50.9% 37.2%, 43.5% 34.7%, 33.6% 26.1%, 39.2% 10.8%, 26.2% 0.0%, 4.8% 6.4%, 0.0% 30.4%, 20.7% 37.2%, 33.4% 26.3%, 43.2% 34.9%, 45.0% 35.6%, 43.6% 46.4%, 37.8% 59.5%, 21.8% 63.2%, 11.7% 76.1%, 22.9% 91.3%, 47.4% 91.3%, 54.0% 79.0%, 38.0% 59.6%, 43.9% 46.4%, 45.2% 35.5%, 50.9% 37.6%, 56.1% 36.8%, 59.8% 47.6%, 70.3% 61.9%, 87.7% 56.0%, 96.4% 37.4%, 88.6% 15.1%, 63.7% 16.7%, 55.2% 33.6%, 55.9% 36.6%, 50.9% 37.2%);"></div>

<div class="shape" 
  style="--path:polygon(50.9% 37.2%, 43.5% 34.7%, 33.6% 26.1%, 39.2% 10.8%, 26.2% 0.0%, 4.8% 6.4%, 0.0% 30.4%, 20.7% 37.2%, 33.4% 26.3%, 43.2% 34.9%, 45.0% 35.6%, 43.6% 46.4%, 37.8% 59.5%, 21.8% 63.2%, 11.7% 76.1%, 22.9% 91.3%, 47.4% 91.3%, 54.0% 79.0%, 38.0% 59.6%, 43.9% 46.4%, 45.2% 35.5%, 50.9% 37.6%, 56.1% 36.8%, 59.8% 47.6%, 70.3% 61.9%, 87.7% 56.0%, 96.4% 37.4%, 88.6% 15.1%, 63.7% 16.7%, 55.2% 33.6%, 55.9% 36.6%, 50.9% 37.2%);
  --offset:180deg;
  --speed: 6000ms;
  --background: linear-gradient( cyan, blue, green, purple, cyan);
  "></div>
  
</div>

这是我的CSS：

.blur-container{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* <= This one */
}

  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: Black;
  
  }
  
  .shape {
    margin: 0 auto;
    aspect-ratio: 1;
    position: relative;
    --width: 100%;
    --scale: 1;
    --opacity: 0.66;
    --top: 0;
    --left:0;
    --path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    --background: linear-gradient( hotpink, red, orange, yellow, hotpink);
    --offset: 0deg;
    --speed: 8000ms;
    clip-path: var(--path);
    background: var(--background);
    scale: var(--scale);
    opacity: var(--opacity);
    width: var(--width);
    top: var(--top);
    left: var(--left);
    rotate: var(--offset);
    mix-blend-mode: difference;
    animation: turn var(--speed) linear forwards infinite;
  }
  @keyframes turn {
    to {
      rotate: calc( var(--offset) + 1turn);
    }
  }
  
  .blur-container {
    --blur: 40px;
    filter: blur(var(--blur));
    height: 100vh;
    width: 100%;
    display: grid;
    overflow: hidden;
  }
  .blur-container > * {
    grid-column: 1/-1;
    grid-row: 1/-1;
  }

我的 CSS 位于标头的 CSS 文件中（ 我这部分的 CSS 不在类似的标题下，它只是在 CSS 代码中，而不是像 {body} 之类的 { 之类的东西。

我现在拥有的是黑色背景，整个页面下方是动画，因为我将其放置在所有内容下方，以便更好地阅读。

我什至不知道它是否处于内容“后面”的这种状态。因为我想要它作为背景。

我尝试将代码复制粘贴到主 HTML 和 CSS 样式文档中。但它不能正确工作，所以我希望它是静态的。它只显示在底部。

Answer 1

您需要将 CSS

position: fixed

属性应用到背景包装器。这将固定其相对于用户视口的位置（即，当用户滚动页面内容时，其位置保持固定）。

根据您在页面上实现其余内容的方式，您可能还需要更改某些元素的

z-index

，以便背景正确位于其他所有内容的后面。