如何仅让背景图片缩放而不影响子元素？

嘿，我懂你碰到的这个问题——当.one-more-container里的背景元素做缩放动画时，里面的.description-container也跟着一起移位、缩放，对吧？我之前也遇到过类似的情况，来帮你捋捋～

问题根源 #

你CSS里的.one-more-container .single-featured-background设置了transform: scale(1.05)，而CSS的transform属性会让元素创建一个新的包含块，所有子元素的布局、定位都会基于这个变换后的容器。所以你的.description-container作为它的后代元素，自然会跟着父元素的缩放一起“动”起来。

另外，你原来的JS代码$('div').removeClass('one-more-container')有点问题——它会移除所有<div>标签的这个类，很可能会影响页面上其他不需要修改的元素，应该改成只针对目标容器：

$('.one-more-container').removeClass('one-more-container');

解决方案 #

方案1：把描述容器移出变换容器（推荐） #

最优雅的解决方式是让.description-container不受父元素transform的影响，把它和背景元素放到同级，用绝对定位固定在页面上。

修改后的HTML结构：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-more-container">
  <!-- 背景单独作为一个容器 -->
  <div id="post" class="single-featured-background" style="background-image: url('<?php echo $thumb['0'];?>')"></div>
  <!-- 标题和描述容器移到外面，和背景同级 -->
  <div class="super-title-container">
    <h1 class="super-title"><?php the_title(); ?></h1>
    <div class="description-container">
      <h2><?php the_field('antraste'); ?></h2>
      <p><?php the_field('aprasymas'); ?></p>
    </div>
  </div>
</div>

调整后的CSS：

.one-more-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative; /* 让子元素的绝对定位基于这个容器 */
}

.super-title-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 实现垂直水平居中 */
  z-index: 10; /* 确保在背景图片上方显示 */
  color: #fff; /* 根据你的页面风格调整文字颜色 */
  padding: 0 20px; /* 可选：添加内边距避免文字贴边 */
}

.one-more-container .single-featured-background {
  transform: scale(1.05);
  transition: all 3s;
}

.single-featured-background {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all 3s;
  overflow: hidden;
}

方案2：用反向变换抵消父元素的影响（不推荐，仅当无法修改HTML时使用） #

如果因为某些原因不能调整HTML结构，可以给.description-container添加反向的transform来抵消父元素的缩放：

.description-container {
  transform: scale(0.952); /* 1 ÷ 1.05 ≈ 0.952，刚好抵消父元素的scale(1.05) */
  /* 如果还有位移问题，可以添加translate来微调位置 */
}

这种方法的缺点是：如果父元素的transform值发生变化（比如hover动画），你需要同步修改子元素的反向变换值，维护起来比较麻烦。

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