我試圖設置滑項目的形象與background-attachment: fixed;
背景圖像工作,但這不與滑塊插件作品「Owl.carousel2」它顯示白色背景。固定背景圖片的風格不owl.carousel.js 2滑塊
$('.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
那麼什麼是的話,爲什麼你認爲你的解決方案的工作?我試過了,沒有任何改變。 – user3003810
background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg'); 改變那一行..我忘了把單引號 –