Bootstrap固定导航栏下Owl Carousel滑块激活时背景图尺寸修改问题

我基于Bootstrap实现了一个自定义样式的固定顶部导航栏，下方是包含图片和表单的Owl Carousel滑块。我希望在滑块处于激活状态时修改背景图的尺寸，但当前使用的CSS样式无法实现该效果，相关代码如下：

HTML代码 #

<section class="home-slider js-fullheight owl-carousel bg-white">
  <div class="slider-item js-fullheight">
    <div class="overlay"></div>
    <div class="container-fluid p-0">
      <div class="row d-md-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
        <div class="one-third order-md-last img js-fullheight" style="background-image:url(images/bg_3.jpg); ">
          <div class="overlay"></div>
        </div>
        <div class="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
          <div class="text mt-md-5">
            <h1 class="mb-4">Kurumsal yemek <!--<br> Delicious Foods--></h1>
            <p>A small river named Duden flows . It is a paradisematic country.</p>
            <!---- Order-->
            <div class="booking">
              <div class="container">
                <div class="row align-items-center">
                  <div class="col-lg-9">
                    <div class="booking-form">
                      <form>
                        <div class="control-group">
                          <div class="input-group">
                            <input type="text" class="form-control" placeholder="Name" required="required" />
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
</section>

当前CSS样式 #

.owl-carousel.home-slider .slider-item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 650px;
  margin-top: 100px;
  position: relative;
  z-index: 0;
}

Owl Carousel会为当前激活的滑块项自动添加.active类，你的问题核心是选择器未命中正确元素——背景图实际在.slider-item下的.one-third.img子元素中，而非.slider-item本身。

1. 编写激活状态的目标样式 #

修改CSS，针对激活滑块内的背景图容器设置尺寸：

/* 保留原有基础样式 */
.owl-carousel.home-slider .slider-item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 650px;
  margin-top: 100px;
  position: relative;
  z-index: 0;
}

/* 激活状态下修改背景图尺寸 */
.owl-carousel.home-slider .slider-item.active .one-third.img {
  background-size: 110% auto; /* 替换为你需要的尺寸，如contain/120% 100%等 */
  background-position: center center; /* 可选：调整背景定位 */
}

2. 验证激活类有效性 #

如果.active类未生效，检查Owl Carousel初始化配置，确保启用了默认的激活类添加逻辑。默认情况下，Owl Carousel会为当前可见的滑块项添加.active类，同时父容器会有.owl-loaded标识。

注意事项 #

• 背景图是通过内联样式写在.one-third.img上的，上述选择器的优先级足够覆盖内联背景属性。
• 若你实际需要修改的是.slider-item自身的背景图（但你的代码中该元素无背景图），只需调整.slider-item.active的background-size属性即可。

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