如何调整 CSS Sprite 中图像的大小？-css教程-PHP中文网

如何调整 CSS Sprite 中图像的大小？

Barbara Streisand

发布： 2024-12-08 22:36:17

原创

993 人浏览过

How Can I Resize Images Within a CSS Sprite?

缩放 CSS 精灵中的图像

在 CSS 精灵中，从较大图像中裁剪较小图像是一种常见技术。但是如果您想调整裁剪部分的大小怎么办？以下是如何缩放 CSS 精灵中的图像：

背景大小

如果大多数浏览器支持背景大小，您可以使用以下内容：

background-size : 150% 150%;

登录后复制

缩放并Transform:scale

为了实现跨浏览器兼容性，请考虑使用 Zoom 和 Transform:scale:

[class^="icon-&quot;]{
    zoom:0.5;
    -moz-transform:scale(0.5);
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
}

登录后复制

.Zoom:

的组合

支持者Webkit/Blink/IE
根据默认缩放设置进行缩放

Transform:scale:

由 Mozilla 支持，旧版Opera
独立于默认缩放比例设置

使用这种方法，您可以轻松缩小或放大精灵内的裁剪图像。例如，要减小所提供示例中“Item1,2,3,4”旁边的图标的大小，只需增加scale()即可。您还可以根据需要调整缩放或比例值。

以上是如何调整 CSS Sprite 中图像的大小？的详细内容。更多信息请关注PHP中文网其他相关文章！