固定的背景图像样式不适用于 owl.carousel.js 2 滑块答案

【问题标题】：fixed background image style not work with owl.carousel.js 2 slider固定的背景图像样式不适用于 owl.carousel.js 2 滑块
【发布时间】：2023-04-05 22:55:01
【问题描述】：

我正在尝试使用background-attachment: fixed; 将滑块项的图像设置为背景图像，但这不适用于显示白色背景的滑块插件“Owl.carousel2”。

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items:1
})

.owl-carousel .item {
  height:600px;
}
.owl-carousel .item .item-content {
  height:600px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center;
  background-attachment: fixed; /* not work !*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>



<div class="owl-carousel owl-theme">
  <div class="item">
    <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg)" class="item-content">
      <div class="caption">
        <h3>Caption Title!</h3>
      </div>
    </div>
  </div>
  <div class="item">
    <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg)" class="item-content">
      <div class="caption">
        <h3>Caption Title!</h3>
      </div>
    </div>
  </div>
  <div class="item">
    <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg)" class="item-content">
      <div class="caption">
        <h3>Caption Title!</h3>
      </div>
    </div>
  </div>
</div>

在codepen上查看示例

【问题讨论】：

标签： jquery css slider owl-carousel

【解决方案1】：

第一步创建您的样式表并将其命名为 app css 之类的任何名称。然后在 app.css 中写这个

. item-content{    
    height:600px; 
    background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg);  
    background-repeat:no-repeat;
    background-size:cover; 
    background-position: center; 
    background-attachment: fixed;     
}

这样会更容易，并且会覆盖当前样式

【讨论】：

那是什么情况，为什么您认为您的解决方案有效？我试过了，没有任何改变。
背景图片:url('s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg');改变那行..我忘了放单引号

【解决方案2】：

请更正内联样式的语法。

Codepen

<div class="owl-carousel owl-theme" style="background-image:url('https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg')">

【讨论】：

【解决方案3】：

第一步创建您的样式表并将其命名为 app css 之类的任何名称。然后在 app.css 中写这个

. item-content{
     height:600px; 
     background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg');
     background-repeat:no-repeat;
     background-size:cover; 
     background-position: center; 
     background-attachment: fixed; 
}

【讨论】：