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

缩放 CSS 精灵中的图像

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

背景大小

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

background-size : 150% 150%;

缩放并Transform:scale

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

[class^="icon-"]{
    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中文网其他相关文章！