縮放div背景圖片

我有一個單一的PNG與其上的各種社會登錄按鈕圖像。我可以讓他們只顯示我想通過以下CSS類的圖像：縮放div背景圖片

.sign-in-with-facebook { 
    width: 430px; 
    height: 88px; 
    background-image: url("/static/social-media-icons/social-sign-in-buttons.png"); 
    background-position: -184px -110px; 
} 
.sign-in-with-google { 
    width: 430px; 
    height: 88px; 
    background-image: url("/static/social-media-icons/social-sign-in-buttons.png"); 
    background-position: -184px -401px; 
} 
.sign-in-with-twitter { 
    width: 430px; 
    height: 88px; 
    background-image: url("/static/social-media-icons/social-sign-in-buttons.png"); 
    background-position: -184px -207px; 
}

，再加入類似以下的div會得到我的圖片出現在我的網頁：

<div class="sign-in-with-twitter"></div>

第一關閉，這是一個合理的方式來處理這樣的圖像「表」？

其次，我的主要問題是我想縮小這些按鈕，使它們變小，因爲它們在原始PNG中相當大。我試過玩background-size，max-width,max-height，將它們包裹在另一個div中，等等，但都沒有運氣。幫助將非常感謝！

來源

2015-07-12 Gravity Grave

是的，它是根據後臺合理的，那麼背景大小+的背景位置復位（如Photoshop）大小的值允許從sprites做出響應背景:)這裏是一個例子，如果這你想要的：http://codepen.io/gc-nomade/pen/cxDIh調整寡婦的寬度，以查看調整後的精靈/背景 –

@GCyrillus是的，這與我所需要的很接近，但我仍然無法從你的榜樣中拼湊出它。如果你回答一個讓我更具體的背景的話，我會很樂意接受。 –

@GravityGrave請考慮接受答案，以完成您的問答過程，並激勵他人回答您的問題 – Trix

是的！這是一個名爲合理的方式Spriting
最好的辦法是縮小它，使用一些光柵編輯工具

來源

2015-07-12 21:23:02 Trix

我的問題是，它在移動設備上不能正確縮放（即它沒有響應）。 @ GCyrillus的評論更接近我所需要的，但不是那樣。 –

就像在你的問題中，你告訴「問題是我想縮小這些按鈕，因爲它們在原始圖像中相當大」。如果您在移動或響應問題方面遇到問題，請考慮提出新問題 – Trix

縮放div背景圖片

回答

相關問題