Bootstrap5移动端RGBA背景色不生效问题求助

问题场景 #

使用Bootstrap 5开发页面，PC端能正常显示图片上方的紫色半透明背景，但iPhone、Android移动端样式不生效；仅当Android设备切换为电脑视图模式（模拟PC宽度）时，样式才恢复正常。

相关代码 #

HTML代码：

<div class="container-fluid overflow-hidden px-lg-0" style="margin: 6rem 0;">
   <div class="container quote px-lg-0">
      <div class="row g-0 mx-lg-0">
         <div class="col-lg-6 quote-text" data-parallax="scroll" data-image-src="img/carousel-1.jpg">
            <div class="h-100 px-4 px-sm-5 ps-lg-0 wow fadeIn" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeIn;">
               <h2 class="text-white mb-4">Home |  Commercial | Industrial</h2>
               <p class="text-light mb-5">test</p>
            </div>
         </div>
      </div>
   </div>
</div>

CSS代码：

.container.quote .quote-text {
  background: rgba(1, 10, 53, .8);
}

问题原因分析 #

1. 视差插件的移动端限制
   你使用的data-parallax="scroll"这类视差滚动插件，通常默认在移动端（屏幕宽度低于指定断点，比如992px）禁用视差效果：

   • PC端插件会自动给.quote-text设置与背景图匹配的高度，同时加载背景图，半透明背景色叠加后显示正常；
   • 移动端插件不加载背景图，也不会给元素设置高度，.quote-text仅靠内部少量内容撑高，背景色覆盖范围极小，视觉上看起来“不生效”。

2. Bootstrap响应式类的高度影响
   .quote-text添加的col-lg-6是Bootstrap的响应式布局类，仅在屏幕宽度≥992px（lg断点）时生效6列布局；移动端下元素默认是100%宽度，但没有明确高度设置。内部的h-100（height:100%）依赖父元素的高度才能生效，移动端父元素.quote-text无高度，导致h-100不起作用，内容无法撑满区域，背景色无法覆盖预期范围。

3. 潜在的样式覆盖问题
   检查是否存在针对移动端的媒体查询（比如@media (max-width: 991px)）覆盖了.quote-text的背景色样式，或者Bootstrap的默认样式优先级更高，导致自定义背景色被覆盖。

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