CSS精靈背景大小

Question

我有一個頁面，我目前使用CSS圖像精靈爲圖標作爲背景。

我使用CSS sprites的問題是背景大小。我不確定什麼是放大或縮小的最佳方式，以便我的圖像不會模糊。

這是我的CSS目前;

background-image: url(../../img/registration_icons_720.png); 
background-size: 273px 342px; 
background-repeat: no-repeat; 
display: block; 
font-size: 25px; 
height: 60px; 
margin-top: 40px; 

這就是圖標目前的樣子。 blurry icons CSS sprites

我的問題是，有人可以告訴我我做錯了什麼，以及找到使用CSS sprites的背景大小的最佳方法是什麼？

非常感謝

Answer 1

我已經最近有這個問題，而使用SVG精靈牀單作爲背景圖像對我的圖標/按鈕。我今晚碰到你的線程，碰巧解決我的問題後不久，所以計算我會回覆：

基本上，我意識到使用'background-size：包含'爲個別SVG文件爲我的圖標設置它們的元素的「高度」與圖標所需的大小相同，我的圖標在Chrome/Firefox中都非常清晰。但是當我去使用精靈時，我不能再使用'background-size：contains'，因爲我的精靈表中的圖標大小不同。當使用具有「背景大小」的像素來調整大小時，它們在Chrome中變得稍微不簡單，並且在Firefox中傳遞的方式太模糊。我願意和他們在Chrome中清爽一點（他們看起來很好，我注意到大多數網站的圖標與我正在處理的「不完美」大致相同），但在Firefox中卻沒有。

我的解決方案是讓我的所有圖標在Illustrator/my SVG文件中具有相同的「高度」，並以水平行顯示它們。這樣，我仍然可以在設置父元素的「高度」時使用'包含'作爲'背景大小'，並且只需使用'背景位置'將水平圖標的位置設置爲我想要的'寬度'內的水平位置即可。然後，我只需在其元素上使用填充來製作任意大小的圖標的可點擊區域。

我不完全確定這會在使用PNG時有多大幫助，但假設您沒有任何比其他任何圖標都大得多的圖標，並且您可以在Photoshop中調整您的PNG大小，以便它們都是一樣的高度，它可能會對你有利。

希望這會有所幫助。