使用CSS3的background-size优化Sprites图显示

时间:2024-04-20 22:34:28

当我的Sprites图像是300px,如何指定background-size为32px呢?其实不难,只需要一点点数学计算,这是一个很初级的过程。

在我们的实例中,我们使用媒体社交图标.我想让他们都按16px x 16px的大小显示。我们将创建一个适合Retina屏幕设备的Sprites 图像,将图像尺寸翻倍(32px x 32px),并且保存他。为了保证普通显屏设备的图像显示,在这个图像的基础上做了一半的缩小。

在最初的CSS样式中,background-position的属性值都不需要进行任何设置,因为他们的默认值都是“0”,如下所示:

#social-icons .facebook {
background: url(images/social-sprite.png);
background-position-x: 0px;
background-position-y: 0px;
height: 16px;
width: 16px;
} #social-icons .facebook:hover {
background-position-y: -16px;
}

对于我们的Retina屏幕显示,我们必须声明一个Media Queries,该Media Queries专门针对Retina屏幕设备显示器。我们同时改变背景大小而不是宽度和高度。

因此,最关键的问题是,我们怎么知道background-size属性值要设置为多少?

这里有一个公式

高分辨率图像宽度 / 目标图像宽度 = X

原始Sprites图像宽度 / x = background-size的宽度值

实例说话

我们高分辨率下的图标是32px x 32px;

我们目标图像的宽度是“16px”;

我们Sprites图像的总宽度是“96px”

根据前面的公式 可以得知

32/16 = 2

96/2 = 48

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

@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max-moz-device-pixel-ratio: 2) {
#social-icons .facebook {
background: url(images/social-sprite2x.png);
background-position-x: 0px;
background-position-y: 0px;
background-size: 48px auto;
} #social-icons .facebook:hover {
background: url(images/social-sprite2x.png);
background-position-x: 0px;
background-position-y: -32px;
},
但是对于需要自适应的web端或是移动建议使用rem来定义background-size ,可以随着屏幕宽度来改变大小