高分辨率CSS精靈

我正在生成CSS精靈。我想要使用這些精靈的多種尺寸。我搜索了，但一直沒能弄清楚如何在功能上縮放CSS sprite - 例如。如果原始精靈在150x150，我想以50x50顯示，我該怎麼做？ background-size似乎打破它。高分辨率CSS精靈

我可以在需要的大小生成精靈，但是當我通過ImageMagick的-resize執行此操作時，我會引起明顯的分辨率問題。通常，如果我發現圖像在網頁上的分辨率低得無法接受，我只會製作更大的圖像並縮放其大小，從而在功能上提高圖像的分辨率。

因爲我不知道如何縮放CSS精靈，我有點卡住 - 我怎麼能實現使用CSS精靈的任意分辨率？

來源

2012-01-20 aresnick

我認爲這與ImageMagick的調整質量大於CSS有關。 –

@Diodeus歸咎於ImageMagick是不公平的。除非您使用矢量圖形，否則無法從任何軟件獲得完美質量的任意分辨率縮放比例。 – koan

通常情況下，您將從更高分辨率開始，然後從中製作更低分辨率的版本。如果IM不能很好地完成，那就是廢話。 –

，你可以做到這一點的最優雅的方式是使用CSS3 background-size，但不支持所有的瀏覽器（例如IE < = 8）。您可以查看可使用的特定於IE的轉換或過濾器，然後添加-mz-,-webkit-和-o-選擇器，以便在要定向的瀏覽器上獲得所需的效果。

最簡單的方法是僞造精靈的比例和位置。

的HTML

<div class="ex3"> 
    <img src="http://www.placekitten.com/g/600/400"/> 
</div>

的CSS

.ex3 { 
    position: relative; 
    overflow: hidden; 
    width: 50px; 
    height: 50px; 
} 
.ex3 img { 
    position: absolute; 
    top: -25px; 
    left: -25px; 
    width: 150px; /* Scaled down from 600px */ 
    height: 100px; /* Scaled down from 400px */ 
}

小提琴

http://jsfiddle.net/brettwp/s2dfT/

來源

2012-01-20 21:42:51

我知道沒有辦法改變CSS精靈的大小，對不起。

作爲生成CSS精靈，試試： http://spriteme.org/

或者一般的圖像編輯： http://www.gimp.org/

您可以編輯各個圖像元件，然後用SpriteMe生成雪碧。你不想生成精靈，然後調整整個精靈圖像的大小，因爲每個單獨元素的CSS位置將被丟棄。

來源

2012-01-20 20:19:58

我看到的選項：

要麼精靈的內容以不同的尺寸在一個精靈。
或者取原始精靈並手動調整大小以創建一個較小的副本。然後在您需要更小的圖像時參考較小的精靈版本。

來源

2012-01-20 20:32:38 NightHawk

高分辨率CSS精靈

回答

相關問題