響應雪碧背景圖像，如何

嗨我有一個容器內的兩列內容，第一列有文本，第二個是跨度與背景精靈圖像。問題是，當我達到較小的屏幕分辨率時，我希望背景精靈圖像具有百分比寬度，以便能夠以百分比寬度與H5一起縮放，有沒有辦法做到這一點？響應雪碧背景圖像，如何

h5{ 
    float:left; 
    display:block; 
    width:800px; 
} 

.sprite{ 
    background-image: url("assets/img/website_sprite_a.png"); 
    background-position: -60px -60px; 
    float:left; 
    display:block; 
    width:64px; 
} 

<div class="container"> 
<h5>Title 
</h5> 
<span class="sprite"> 
</span> 
</div>

來源

2013-01-23 user1937021

可能最好不要使用sprite。只需使用獨立的圖像。這裏有一篇關於如何做到這一點的好文章：http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios –

在你的情況我會用一個background-image去，但在情況下，你將有大量的圖片，或者你真的想這樣做，你可以使用背景大小財產。

從MDN：

背景大小的CSS屬性指定的背景圖像的大小。圖像的大小可以完全限制或僅部分地保留其內在比例。

.sprite{ 
    background-image: url("assets/img/website_sprite_a.png"); 
    background-position: -30% -30%; //use % instead pixels 
    float:left; 
    display:block; 
    width:64px; 
    background-size: 100%; //play with this 
}

你也應該閱讀：

Scaling background images

我打了一點點這個on JSFIddle。調整瀏覽器的大小以查看效果。

來源

2013-01-23 10:01:20

謝謝，我高興地說：但是當我把背景大小：100％;精靈看起來很小，我不想給精靈一個固定的寬度。 – user1937021

@ user1937021請提供您的代碼jsfiddle，看看發生了什麼，你會得到更多的幫助（包括我） –

差不多一年太晚了，但我試圖找出相同的，並沒有能夠拿出或找到一個直接的答案。在多方面的建議後，我弄明白了。還沒有機會在IE8上測試它，並且不再用IE6/7來打擾，所以請牢記這一點。

我發現的技巧是使用背景位置（使用精靈圖像的百分比 - 如前所述），填充頂部（再次使用百分比 - 這是百分比精靈圖像）和背景大小：封面。

玩在jsfiddle。

#wrapper { 
    position: relative; 
    width: 100%; 
} 
.div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-image: url('http://upload.wikimedia.org/wikipedia/en/2/2e/Sprite_logo.jpg'); 
    background-repeat: no-repeat; 
    background-position: 0% 0%; 
    background-size: cover; 
    padding: 50% 0 0 0; 
    width: 40%; 
} 

<div id="wrapper"> 
    <div class="div"></div> 
</div>

來源

2013-11-26 15:44:10 user3037131

響應雪碧背景圖像，如何

回答

相關問題