如何缩放 CSS 精灵中的裁剪图像？

在 CSS Sprites 中缩放裁剪图像

标题为“CSS Sprites：提高 Web 性能的技术”的文章讨论了从 CSS Sprites 中裁剪较小图像的方法更大的图像。本文探讨了在将裁剪区域放入布局之前不仅进行裁剪，还对其进行缩放的可能性。

如文章中所示，示例 CSS 代码片段可能如下所示：

A {
  background-image: url(spriteme1.png);
  background-position: -10px -56px;
}

要在从精灵中提取裁剪后的图像后对其进行缩放，可以使用背景大小属性。大多数主要浏览器（但不是全部）都支持此属性。例如，要将裁剪后的图像缩放到其原始大小的 150%，可以使用以下样式规则：

background-size: 150% 150%;

缩放裁剪后的图像的另一种方法是利用缩放和变换的组合：尺度属性。此方法为桌面和移动设备提供跨浏览器支持。下面是一个示例：

[class^="icon-"] {
  display: inline-block;
  background: url('../img/icons/icons.png') no-repeat;
  width: 64px;
  height: 51px;
  overflow: hidden;
  zoom: 0.5;
  /* Mozilla support */
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
}

.icon-big {
  zoom: 0.60;
  /* Mozilla support */
  -moz-transform: scale(0.60);
  -moz-transform-origin: 0 0;
}

.icon-small {
  zoom: 0.29;
  /* Mozilla support */
  -moz-transform: scale(0.29);
  -moz-transform-origin: 0 0;
}

通过这些技术，可以从 CSS 精灵中裁剪和缩放较小的图像，从而在使用网页布局时实现更大的灵活性和自定义性。

以上是如何缩放 CSS 精灵中的裁剪图像？的详细内容。更多信息请关注PHP中文网其他相关文章！