如何实现容器内背景图片持续旋转动画且不旋转整个容器

核心思路是把背景色轮和容器内容分层：用伪元素单独承载色轮背景并添加旋转动画，容器内的logo和副标题保持独立不受旋转影响。

修改步骤： #

1. 调整.banner-container的CSS，移除原有背景图属性并设置相对定位，让伪元素能基于它定位；
2. 用::before伪元素创建覆盖整个容器的背景层，设置色轮背景并放在内容下方；
3. 定义无限旋转动画，给伪元素添加动画属性实现持续旋转。

修改后的完整代码： #

HTML（无需修改） #

<section id="banner">
    <div class= "banner-container">
      <div class="row">
        <div class="col text-center">
            <img src="images/BenMillerType.png" class="logo"/>
        </div>
      </div>
      <div class="row justify-content-center align-items-center">
        <div class="col-md-10">
          <p class="promo-title text-center"></p>
          <p class="promo-subtitle text-center">
            Graphic Design | 3D Design | UI/UX Design
          </p>
        </div>
      </div>
    </div>
  <div id="work"></div>
</section>

CSS（修改后） #

#banner {
  margin-bottom: 100px;
  background-color: #FFFDC4 ;
  border-bottom: 1px solid black;
}

.banner-container{
  overflow: hidden;
  width: 100%;
  height: 95vh; /* 改用vh单位确保高度铺满视口，原95%可能高度不足 */
  margin: 0 !important;
  position: relative; /* 新增：作为伪元素定位的基准 */
}

/* 新增：伪元素承载色轮背景并实现旋转 */
.banner-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/images/ColourWheel.png);
  background-position: center;
  background-size: cover; /* 确保背景铺满容器 */
  z-index: -1; /* 放在内容下方，不遮挡logo和副标题 */
  animation: rotate 20s linear infinite; /* 20秒转一圈，匀速，无限循环 */
}

/* 新增：旋转动画规则 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.promo-subtitle {
  font-size: 20px;
  background-color: rgb(42, 156, 157) !important;
  color: #fff;
  border-radius: 30px;
  border: 1px solid black;
  padding: 10px 20px;
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 1; /* 确保副标题在背景上方 */
}

.logo {
  margin-top: 250px;
  object-fit:contain;
  width: 500px;
  height: auto;
  z-index: 1; /* 确保logo在背景上方 */
}

关键说明： #

• animation: rotate 20s linear infinite：20s是旋转一圈的时长，可根据需求调整；linear保证旋转速度均匀；infinite实现无限循环；
• 伪元素的z-index: -1：让背景层处于容器内容下方，不会遮挡上层的logo和副标题；
• .banner-container的position: relative：是伪元素绝对定位的基础，确保背景层只覆盖当前容器范围。

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