css - 如何在 CSS Sprite 中缩放图像

Question

在本文中，http://css-tricks.com/css-sprites/ ，它讨论了如何从一张较大的图像中裁剪出一张较小的图像。能否请您告诉我是否可行/如何裁剪较小的图像，然后在布局之前缩放裁剪区域？

这是那篇文章的一个例子:

A
{
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

我想知道从 spriteme1.png 裁剪后如何缩放该图像

这是示例的 URL: http://css-tricks.com/examples/CSS-Sprites/Example1After/

所以我想知道是否可以将 Item1,2,3,4 旁边的图标变小？

Answer 1

2021 更新:大多数主流浏览器都支持背景大小，但如果您的移动浏览器不支持，请使用缩放。

您可以使用 background-size，因为大多数浏览器都支持它(但不是所有 http://caniuse.com/#search=background-size)

background-size : 150% 150%;

或者

您可以将 zoom 组合用于 webkit/blink/ie 和 transform:scale 用于 Mozilla(-moz-) 和旧 Opera(-o-)跨浏览器桌面和移动

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