CSS如何实现云朵背景图移动且不随HTML文本一同位移

你当前直接将动画背景绑定在.intro容器background-image属性上的写法，背景属于容器盒模型的渲染部分，会跟随容器的位置变化、内容高度变化同步位移，天然和容器内的内容处于同一渲染流，无法实现独立运动的效果。

将云朵背景拆分到独立的脱离文档流的层级中，和文本内容完全解耦，动画仅作用在独立背景层上即可。不需要改动现有HTML结构，直接复用伪元素实现即可。

完整修改后CSS代码 #

.intro {
  position: relative;
  overflow: hidden; /* 裁剪背景层溢出部分 */
}

/* 独立云朵背景层 */
.intro::before {
  content: "";
  position: absolute;
  inset: 0; /* 四边对齐铺满整个.intro容器 */
  z-index: 0;
  background-image: url(https://via.placeholder.com/50.jpg);
  background-repeat: round;
  animation: animatedBackground 5s linear infinite;
}

/* 提升内容层级，避免被背景遮挡 */
.intro > * {
  position: relative;
  z-index: 1;
}

@keyframes animatedBackground {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -20px 0;
  }
  100% {
    background-position: 20px 0;
  }
}

实现说明 #

• 用.intro的::before伪元素承载云朵背景，无需新增HTML标签
• 背景层设置绝对定位脱离普通文档流，动画渲染完全独立，不会和内部文本、容器内容位移产生联动
• 给容器内所有业务内容设置更高的层级，保证文本、链接的可访问性不受背景影响
• 如果需要云朵背景固定在视口位置、不随页面滚动移动，仅需将.intro::before的position属性值改为fixed即可

动画优化提示：当前关键帧设置了50%位置的回弹，云朵运动到两端会有顿挫感，如果需要循环平移的自然漂浮效果，可以将关键帧改为从0% { background-position: 0 0; }到100% { background-position: 100% 0; }，动画连贯性会更好。

内容的提问来源于stack exchange，提问作者KwameDickson