旋轉木馬不結垢方式與背景圖像相同

我有以下標記：旋轉木馬不結垢方式與背景圖像相同

<section class="block"> 

<img class="img-background" src="assets/background_banner.png" alt="" > 

    <div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
       <div class="active item"> 
      <img src="assets/banner_1.png" alt="" > 
        </div>

而CSS是這樣的：

.img-background{ 
position:absolute; 
margin-left:50%; 
left:-512px; 
top:0px; 
z-index:1; 
} 

.carousel{ 
    position:absolute; 
margin-left:50%; 
left:-512px; 
top:0px; 
z-index:2; 
} 

.carousel .item { 
    width: 100%; /*slider width*/ 
    height: auto; /*slider height*/ 

} 
.carousel .item img { 
margin-left: 0%; 
    width: 100%; /*img width*/ 

} 
/*full width container*/ 
@media (max-width: 767px) { 
    .block { 
margin-left: -20px; 
     margin-right: -20px; 
    } 
}

它的工作原理，當瀏覽器全屏顯示。我有一個背景圖像和旋轉木馬幻燈片上面。但是，當我使瀏覽器變小時，旋轉木馬在圖像縮放時保持很大。我希望他們都以同樣的方式進行縮放。這可能嗎？

來源

2013-09-01 Diego

如果您想將圖像與旋轉木馬一起縮放，請添加寬度：100％;並看看會發生什麼。

.img-background{ 
position:absolute; 
margin-left:50%; 
left:-512px; 
top:0px; 
z-index:1; 
width: 100%; 
}

雖然工作代碼的例子將是更好的調試。

我個人將使用圖像作爲背景圖像。也許從HTML中刪除它，並把它添加到你的CSS像這樣：

.block { 
    background: url(assets/background_banner.png) no-repeat; 
}

來源

2013-09-01 00:13:00 Xarcell

不知何故當我添加背景標籤的CSS，圖像將不會顯示。這將是實現這一目標的理想方式。我必須玩100％，因爲它現在比旋轉木馬更大。 – Diego

然後你的圖像路徑不正確。我不知道你的路徑是什麼，所以我認爲你會發現它。試試'background：url（./ assets/background_banner.png）no-repeat;' – Xarcell

這很奇怪，我檢查了路徑，但那不是問題。儘管如此，我仍然可以運作。我不得不添加100％並將圖像放置在旋轉木馬上。謝謝 – Diego

旋轉木馬不結垢方式與背景圖像相同

回答

相關問題