滑動滑塊內的背景圖像

Question

<div id="largeCarousel" style="display:inline-block; float:right;"> 
     <div class="homepage-item" style="padding-bottom:52%; position:relative; box-sizing:border-box;"> 
      <div id="largeCarouselContent" style="position:absolute; top:0; left:0; width:100%; height:100%; overflow-x:hidden; overflow-y:hidden"> 
       <div style="color:white;">Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap </div> 

       <div> 
        <div style="position:relative; top:0; left:0;">Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap </div> 
        <img src="~/Content/images/Canvas1.jpg" style="position:absolute; top:0; left:0; height:100%; width:100%;" /> 
       </div>      
       <div><img src="~/Content/images/logo.jpeg" style="width:100%;" /></div> 
      </div> 
     </div> 
    </div> 

上面我有一個包含滑塊的內容框。內容框的長寬比爲1/.52。我的目標是在每張幻燈片上放置不同的背景圖像，並在圖像上疊加內容。背景圖片也必須通過網頁訪問，所以設置background-image css屬性似乎不起作用。 #largeCarouselContent中的每個div都是幻燈片。目前的解決方案不起作用，因爲canvas1.jpeg跨越所有幻燈片。我難過，有什麼想法？

Answer 1

如果我很好地理解你，你想要一個背景圖像，對吧？如果是這樣，爲什麼不使用CSS背景而不是內聯圖像？併爲每張幻燈片使用background-size: cover;。因此，無論圖像具有什麼樣的縱橫比，它都會填滿整個容器。

.homepage-item { 
    background: url("~/Content/images/Canvas1.jpg") no-repeat center/cover; 
    box-sizing: border-box; 
    padding-bottom: 52%; 
    position: relative; 
}