Bootstrap5如何仅翻转section背景图、不翻转内容且不使用内联样式

针对两个问题分别给出可直接复用的实现方案：

1. 仅翻转背景图、不影响内部元素的实现 #

不要直接给<section>加transform: scaleX(-1)，该属性会作用于整个元素及所有子节点，哪怕给子元素加反向翻转抵消效果，也会带来维护成本高、定位偏移、渲染模糊的问题。
最稳定通用的方案是用伪元素单独承载背景图，翻转效果仅加在伪元素上：

• 给section设置相对定位，作为伪元素的定位基准
• 给section的::before伪元素设置绝对定位，铺满整个section区域
• 将背景图、翻转效果都加在伪元素上，通过z-index把伪元素垫在内容层下方，完全不影响内部navbar、row的正常展示

2. 外部CSS设置背景图不生效的排查与实现 #

外部CSS设置背景图不生效基本是三个原因，对应调整即可：

• 选择器优先级不足/引入顺序错误：自定义CSS必须放在Bootstrap CSS文件之后引入，同时适当提高选择器权重，避免被Bootstrap默认样式覆盖
• 背景图路径错误：外部CSS中url()的路径是相对于CSS文件自身的存储路径，不是相对于HTML文件路径，路径写错会导致图片404无法加载
• 容器高度塌陷：如果section内部元素存在脱离文档流的定位、浮动，会导致section自身高度为0，背景图无法显示，按需给section设置最小高度即可

完整代码示例 #

HTML部分（移除内联样式）

<section class="hero-section bg-image">
  <nav class="navbar navbar-expand-lg">
    <!-- 导航栏原有内容 -->
  </nav>
  <div class="row">
    <!-- 行布局原有内容 -->
  </div>
</section>

外部CSS部分

/* section容器设置定位基准 */
.hero-section {
  position: relative;
  /* 按需设置最小高度，避免高度塌陷，示例为占满视口高度 */
  min-height: 100vh;
  /* 创建独立层叠上下文，确保伪元素不会溢出遮挡其他外部元素 */
  isolation: isolate;
}

/* 伪元素承载背景与翻转效果 */
.hero-section::before {
  content: "";
  position: absolute;
  /* 铺满父容器整个区域 */
  inset: 0;
  /* 层级放在内容下方 */
  z-index: -1;
  /* 背景图配置，注意url路径相对当前CSS文件 */
  background-image: url('../assets/your-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 仅翻转背景，不影响内部内容 */
  transform: scaleX(-1);
}

补充说明 #

• 如果需要调整背景的变换效果（上下翻转、角度旋转等），直接修改伪元素的transform属性即可，不会对内部布局产生任何影响
• 样式调试时可打开浏览器开发者工具，选中section元素查看样式面板：如果自定义背景样式被划掉，说明优先级不足/引入顺序错误；如果背景图路径报404，说明url路径填写错误，对应调整即可

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