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;}

精灵上的图像宽度和高度为48px，因为在网站的其他地方使用。我宁愿使用相同的方法，而不是使用较小的大小制作相同图像的新HTTP请求，或者增加精灵的大小。

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

非常感谢

Answer 1

这可以使用CSS3 background-size属性轻松完成。

创建一个新的CSS类，它也使用相同（更大）的精灵图像，但背景尺寸减小了。例如。如果您的原始精灵是640px乘320px，您可以在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。您可以在<img src="sprite.png" />中设置具有适当宽度和高度的背景（z-indexed）li。图像也需要具有位置：绝对并且是具有位置的跨度的父级：相对，溢出：隐藏......以及更多的调整。

我想说你应该使用正确尺寸的图标制作更多图像，或者在sprite.png中添加不同尺寸图标的行。

CSS：从精灵</li>调整<li>背景图像的大小

2 个答案: