需要修复视网膜精灵CSS问题 [英] need to fix retina sprite css issue
问题描述
我正在尝试优化www.talkjesus.com的移动皮肤，使其视网膜透明.
I'm trying to optimize the mobile skin for www.talkjesus.com to be retina clear.
我用独立图像完成了这一点，例如facebook/twitter图标，徽标以及标题中右上方的3个图标.
I accomplished this with standalone images such as the facebook/twitter icons, the logo and the top right 3 icons in the header as well.
我遇到的问题是完全针对精灵图像执行此操作.
Problem I'm having is doing this for the sprite image entirely.
这是CSS代码(默认)
This is the css code (default)
.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
This is the new one I made, 64px: http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-64.png
默认情况下，视网膜样式图片至少应比要应用的大小大2倍.在这种情况下，它是原始的24px，但我不知道如何修改css代码以反映新的尺寸，因此它会从64px版本中提取正确的图标，同时仍以24px实时显示.
By default the retina style image should be at least 2x larger than the size that will be applied. In this case, it is 24px original but I do not know how to modify the css code to reflect the new dimensions so it pulls the correct icon from the 64px version while still displaying at 24px live.
感谢您的帮助
推荐答案
我为此创建了一个新的精灵生成器，与那里的其他生成器不同，您可以使用视网膜图像创建常规的精灵，最后您可以在偏好设置中检查一个选项，告知它适用于视网膜，并且在下载该选项时会同时获得常规和视网膜精灵.
I created a newly sprite generator for this kind of purpose, unlike the others out there, you can create a regular sprite with retina images, in the end you can check an option in the preference telling it is for retina and you will get both regular and retina sprites when you download it.
并获取生成的CSS
这篇关于需要修复视网膜精灵CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
