2013-08-22 25 views
2

我想優化www.talkjesus.com的移動皮膚視網膜清晰。需要解決視網膜精靈css問題

我用獨立的圖像完成了這個工作,例如facebook/twitter圖標,徽標和標題右上角的3個圖標。

問題我現在正在爲精靈圖像完成這個操作。

這是CSS代碼(默認)

.ui-icon, .ui-icon-searchfield:after { 
background-image: url({vb:stylevar imgdir_mobile}/metro-icons-24.png); 
border-radius: 0; 
background-color: transparent; 
} 
.ui-icon-plus {background-position:-0 50%} 
.ui-icon-minus {background-position:-28px 50%} 
.ui-icon-delete {background-position:-56px 50%} 
.ui-icon-arrow-r {background-position:-84px 50%} 
.ui-icon-arrow-l {background-position:-112px 50%} 
.ui-icon-arrow-u {background-position:-140px 50%} 
.ui-icon-arrow-d {background-position:-168px 50%} 
.ui-icon-check {background-position:-196px 50%} 
.ui-icon-gear {background-position:-224px 50%} 
.ui-icon-refresh {background-position:-252px 50%} 
.ui-icon-forward {background-position:-280px 50%} 
.ui-icon-back {background-position:-308px 50%} 
.ui-icon-grid {background-position:-336px 50%} 
.ui-icon-star {background-position:-364px 50%} 
.ui-icon-alert {background-position:-392px 50%} 
.ui-icon-info {background-position:-420px 50%} 
.ui-icon-home {background-position:-448px 50%} 
.ui-icon-search,.ui-icon-searchfield:after {background-position:-476px 50%} 
.ui-icon-checkbox-off {background-position:-554px 50%} 
.ui-icon-checkbox-on {background-position: -530px 50%;} 
.ui-icon-radio-on {background-position: -577px 50%;} 
.ui-icon-radio-off {background-position: -601px 50%;} 

這是原來的精靈: http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-24.png

這是新的我做了,64PX: http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-64.png

默認情況下,視網膜樣式的圖像應該比應用的尺寸大至少2倍。在這種情況下,它是24像素的原始,但我不知道如何修改CSS代碼以反映新的尺寸,所以它從64px版本拉動正確的圖標,同時仍然顯示24px生活。

感謝您的幫助

+0

檢查您的圖片鏈接精靈的CSS – Jim

+0

固定鏈接謝謝 – Bashed

回答

1

我創建了一個新的子畫面產生了這樣的目的,不像其他人在那裏,你可以創建視網膜圖像的普通精靈,你到底可以檢查一個選項偏好告訴它是視網膜,當你下載它時你會得到正常和視網膜精靈。

,並也得到了生成的css它

CssSpriteGenerator.net

1

您可以檢查以下工具從您所創建

spritecss.com

+1

你不需要提及像**我知道我正在迴應一箇舊的帖子,但以防萬一在以後的時間點引用它。**,任何答案任何t時刻歡迎。 – LuFFy

+1

當然@LuFFy謝謝你。 –