Question

我尝试将滑块项目的图像设置为background-attachment: fixed;的背景图像，但这不适用于滑块插件＆＃34; Owl.carousel2＆＃34;它显示白色背景。

＆＃13;

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

＆＃13;

.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 !*/
}

＆＃13;

<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>

＆＃13;

查看codepen

上的示例

Answer 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;     
}

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

Answer 2

请更正内联样式的语法。

Codepen

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

Answer 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; 
}

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

3 个答案: