CSS：调整大小 <li> 精灵的背景图片

Question

我能否调整精灵中<li>的背景图像的大小？

我有这个HTML：

<li class="bg_image"></li>

这是CSS：

.bg_image {background:url('sprite.png') no-repeat;
background-position:-422px -46px;width:32px;height:32px;}

Sprite上的图像的宽度和高度为48px，因为在网站的其他位置使用了该图像。 我宁愿使用相同的内容，而不是对较小的图像发出相同图像的新HTTP请求，或者增加Sprite的大小。

我可以将其宽度和高度从48px调整为32px吗？

非常感谢

Answer 1

使用CSS3 background-size属性可以轻松完成此操作。

创建一个新的CSS类，该类也使用相同（较大）的精灵图像，但背景尺寸减小。 例如，如果您的原始精灵为640 x 320像素，则可以在CSS中执行此操作：

.bg_image_new
{
    background-image:url('/your/image.jpg');
    background-size:320px 160px;
    background-position:-422px -46px;
    width:32px;
    height:32px;
}

注意：由于您正在有效地将背景精灵减小到新的大小，因此背景位置将发生变化。 然后，您需要重新计算新职位。 对于您的情况，您要减少33.33％（48px-> 32px），因此头寸也将减少-33.33％。

最后，在您的html中，只需执行以下操作：

<li class="bg_image_new"></li>

至少对于现代浏览器而言，这应该可以解决问题。

Answer 2

在当前浏览器中无法使用AFAIK。 至少不与您的HTML。 您的li中可能有一个背景（z索引） <img src="sprite.png" /> ，该背景应具有适当的宽度和高度。 该图像还需要具有position：absolute，并以span为位置，并具有position：relative和溢价：hidden ...作为父项，并且还要进行一些调整。

我想说的是，您应该使用正确的图标大小制作更多图像，或者向您的sprite.png添加具有不同图标大小的行。