使用CSS3的background-size解决Sprite图在移动端显示模糊问题

2015-11-03阅读(5541)评论(4)牵着狗狗看MM

苏州实时公交查询

(本篇只介绍PNG图像问题,当然还可以用SVG来替代,后面会介绍SVG的用法。)
假设我有一个Sprite图像如下图(单个ICON尺寸为26px * 26px,这里为了演示方便,只放2个ICON)
css3-sprites
在PC上使用如下CSS,ICON显示正常,没有出现模糊现象

.icon{
    display: block;
    width: 26px;
    height: 26px;
    background: url(../img/icon.png) no-repeat
}
.icon-one{
    background-position: 0 0;
}
.icon-two{
    background-position: 0 -26px;
}
.icon-three{
    background-position: 0 -52px;
}

但是在IPAD上ICON就会变模糊。
对于Retina屏幕显示,我们必须声明一个Media Queries,该Media Queries专门针对Retina屏幕设备显示器。我们同时改变背景大小而不是宽度和高度。这里可以用CSS的background-size属性来设置。
这里有一个公式
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值

例如:上面的ICON的尺寸为26px * 26px
那么Retina屏幕下我们需要的尺寸就为52px * 52px,即放大两倍。
css3-sprites@2x
套用上面的公式:
高分辨率图像宽度(52px) / 目标图像宽度(26px) = 2
原始Sprites图像宽度(icon.png图片总宽度为78px) / 2 = background-size的宽度值(39px).

最后的一件事情。我们只计算了背景图像的宽度值,为了确保背景图像缩放比例正常,我们将“height”值设置为“auto”。当然你也可以设置相应的值(设置background-size的宽度为auto,高度为具体值),但我发现设置宽度会比较容易。

完整的CSS代码

.icon {
    display: block;
    width: 26px;
    height: 26px;
    background: url(../img/icon.png) no-repeat
}
.icon-one {
    background-position: 0 0;
}
.icon-two {
    background-position: 0 -26px;
}

/* 移动端ICON处理 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max-moz-device-pixel-ratio: 2) {
    .icon {
        display: block;
        width: 26px;
        height: 26px;
        background: url(../img/icon@2x.png) no-repeat;
        background-size: 39px auto;
    }
    /* 注意:这里的background-position还是跟上面一样,不用设置 */
}

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 使用CSS3的background-size解决Sprite图在移动端显示模糊问题
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏