如何讓這個精靈按照我的想法行事？

我有我的div中包含有一個背景圖像以下的HTML。這是一幅全寬圖像，我希望佔用整個屏幕並保持以響應式設計的寬度摺疊爲中心。我也有一個頭，並且具有相同的行爲相似的全長圖像的頁腳，但不是我只顯示了中間的形象在這裏代碼：如何讓這個精靈按照我的想法行事？

<div id="contain"> 
    <div id="middle_contain"> 
     <div class="lawyer_select"> 
      <div class="lawyer_hold"> 
       <img src="images/example.jpg" width="252" height="286" alt="stuff" /></div> 
      <div class="lawyer_hold"> 
       <img src="images/example.jpg" width="252" height="286" alt="things" /> 
       </div> 
      </div> 
     </div> 
    </div>

它具有以下CSS：

#middle_contain{ 
     background-image:url(../images/layout/main-example.jpg); 
     background-position:center; 
     background-size:cover; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
     background-size: cover; 
} 
.lawyer_hold{ 
    height:312px; 
    width:480px; 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); 
    float:left; 
    margin-top:30px; 
} 
.lawyer_hold:nth-child(2){ 
    float:right; 
    margin-top:30px; 
}

現在，我遇到的情況是，而不是加載中間包含圖像加上頁眉和頁腳圖像，我想將它們組合成一個精靈。我無法獲得正確的代碼，儘管如此，我的圖像仍然保持居中等崩潰狀態。我已經嘗試了以下CSS，它將圖像正確放置在我最大的屏幕分辨率上，但是現在，當我摺疊其他所有內容時，這些分辨率都會消失。如何正確維護覆蓋背景並在使用精靈時保持居中？這是可能的還是應該堅持三個單獨的圖像？

#middle_contain{ 
    background-image:url(../images/layout/main-example.jpg); 
    background-position:center; 
    background-position:0px -167px; 
    background-size:cover; 
     -moz-background-size: cover; 
     -webkit-background-size: cover; 
     -o-background-size: cover; 
    background-size: cover; 
}

來源

2013-12-15 absentx

不可能讓背景圖像精靈動態改變大小隻是CSS（至少據我已經能夠）。如果你想使用精靈，你應該使用JavaScript，但是不能保證移動設備會支持Javascript，所以這是一個有爭議的問題。

你無法嚴格調整CSS的原因是因爲圖片不能保持比例; HTML元素的寬度會改變，但高度不會。如果有什麼方法可以讓元素嚴格使用CSS來保持這些比例，那麼我很樂意知道並且會挑起一些示例代碼，但就目前而言，我不相信這是可能的。

在這種情況下，最好堅持使用3張獨立的圖片。但是，您可以精靈圖像不會調整大小。

來源

2013-12-15 20:02:40

如何讓這個精靈按照我的想法行事？

回答

相關問題