固定背景圖片的風格不owl.carousel.js 2滑塊

我試圖設置滑項目的形象與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

來源

2017-08-22 user3003810

-1

的例子請糾正的內嵌樣式的語法。

Codepen

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

來源

2017-08-22 04:38:38

-1

第一步創建您的樣式表，並調用它的應用程序的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; 
}

來源

2017-08-22 04:45:00

第一步創建您的樣式表，並調用它的應用程序的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;  
}

這將是更容易，將覆蓋當前樣式

來源

2017-08-22 04:47:17

那麼什麼是的話，爲什麼你認爲你的解決方案的工作？我試過了，沒有任何改變。 – user3003810

background-image：url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg'）; 改變那一行..我忘了把單引號 –

固定背景圖片的風格不owl.carousel.js 2滑塊

回答

相關問題