如何在不影响内部内容的情况下对background-image使用transform

直接对包含内部元素的div应用transform时，内部所有元素都会跟着被变换。要只让背景图受transform影响，最靠谱的方法是把背景图移到容器的伪元素中，单独对伪元素做变换：

实现步骤 #

• 给容器设置相对定位，作为伪元素的定位基准
• 用::before伪元素承载背景图，设置绝对定位占满整个容器
• 对伪元素单独应用transform属性，同时通过z-index把它放在内容下方

完整代码示例 #

HTML #

<div class="bg-container">
  <h1>Hello, World!</h1>
</div>

CSS #

.bg-container {
  position: relative;
  width: 100%;
  height: 400px; /* 按需设置容器高度 */
  /* 可选：给内部元素设置居中样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.bg-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(example.png);
  background-size: cover;
  background-position: center;
  /* 这里设置你需要的transform效果，比如缩放+旋转 */
  transform: scale(1.1) rotate(3deg);
  z-index: -1; /* 确保背景图在内容下方，不遮挡文字 */
}

额外说明 #

• 如果需要调整背景图透明度，直接给伪元素加opacity属性即可，不会影响内部文字
• 伪元素的content属性必须设为空字符串，否则无法生成伪元素
• 可根据需求调整transform的具体值，translate、skew等效果都适用

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