CSS：调整大小
来自精灵的背景图像

发布于 2024-12-10 06:45:21 字数 436 浏览 0 评论 0原文

我是否可以调整精灵中

的背景图像的大小？

我有这个 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 吗？

多谢

原文

Is it possible I can resize a background image of a <li> of which is in a sprite?

I have this HTML:

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

and this is the CSS:

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

The image on the sprite has width and height 48px because is used elsewhere in the site. I'd rather use the same instead of making a new HTTP request of the same image with smaller size, or increase the size of the sprite.

Is it possible I can resize it from 48px width and height to 32px ?

Thanks alot

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鹿童谣 2024-12-17 06:45:21

使用 CSS3 背景大小属性可以轻松完成此操作。

创建一个新的 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>

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

This can be easily done using the CSS3 background-size property.

Create a new CSS class which is also using the same (larger) sprite image, but with the background size reduced. E.g. If your original sprite is 640px by 320px, you might do this in the CSS:

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

Note: Since you're effectively reducing the background sprite to a new size, the background positions will therefore change. You'd then need to re-calculate the new positions. For your case you're doing a 33.33% (48px->32px) reduction and thus the positions are going to be -33.33% off as well.

Finally, in your html, simply do: