如何在響應式佈局中使用CSS Sprite？

有幾個問題圍繞我的問題展開，但沒有一個答案與我正在嘗試做的事情有關。我通過使用錨標記上的類來爲我的站點徽標使用精靈。問題是我必須定義像素的高度和寬度，這可以防止徽標響應。如何在響應式佈局中使用CSS Sprite？

這裏的HTML：

<a href="<?php echo get_option('home'); ?>/" class="logo-sprite"></a>

這裏的CSS：

a.logo-sprite { 
    background: url('image_here.jpg') 0 0; 
    display: block; 
    width: 450px; 
    height: 130px; 
} 

a.logo-sprite:hover { 
    background: url('image_here2.jpg') 0 -140px; 
}

有什麼想法？謝謝。

來源

2012-11-26 johnnyg

這是一個非常大的精靈圖像！如果必須結合背景比例，你可以在圖像/背景圖像上使用'em'或'％'代替'px'。 SVG背景可能比製作一對不同的縮放精靈圖更好。 – cimmanon

沒錯。由於精靈的定義僅限於固定尺寸（畢竟它們是圖像），因此它們不能「流暢地」用於流體/響應式佈局。

只要您不斷對媒體查詢中的每個「級別」進行調整，就可以在響應式佈局中使用它們。

來源

2012-11-26 21:31:16

所以唯一/最好的選擇是通過樣式表中的媒體查詢設置手動調整？ – johnnyg

@ user1485728：據我所知，是的。你應該檢查http://css-tricks.com上的文章，他們有時在那裏討論它，也許有一篇文章你可能會覺得有用。 –

好的，我有一個想法。

您可以使用background-size屬性將sprite「鎖定」到位，並停止顯示比想要的更多/更少的圖片。這是一個基本的例子：

background-position: 0px 0px; 
background-repeat: no-repeat; 
background-size: 190% 140%;

這裏唯一的問題是，圖像調整到不同的像Div S和錨元素，因此高度不會動態擴展。我相信實現這一目標的唯一方法是使用JavaScript，但我可能是錯的。

這裏是你怎麼可能會開始對這樣的一個粗略的例子： http://jsfiddle.net/VW2dW/16/ 如果調整瀏覽器，你會發現它成功地擴展水平而不是垂直方向這是一個問題。

來源

2012-11-26 21:41:28 Calvin

如何在響應式佈局中使用CSS Sprite？

回答

相關問題