我如何调整大小和大小？通过 CSS 3 放大图像（如精灵图标）？

Question

亲爱的朋友们。 想象一个名为 icons.png 的精灵图像，分配给带有各种 10x10px 图形的 css 类 .icons。现在您需要另一个类，将精灵图形放大两倍 200%（使它们在屏幕上为 20x20 像素）

如何在 CSS 中纯粹实现这种放大？
非常感谢！

.icons, .iconsbig{    /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}

.iconsbig{    /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
    image-rendering:-moz-crisp-edges;
    -ms-interpolation-mode:nearest-neighbor;
}

更新：

上述代码的问题：

• 它可以在 IE9 中运行，但不能在 FireFox 中运行，大多数使用的浏览器不知道如何调整大小？？？
• 在 IE9 中，放大效果很脏，而且邻居像素根本不完美？

Answer 1

除了 几乎所有内容都支持，除了 IE9...

.iconsbig {  
    -moz-background-size: 20px;
    background-size: 20px;
    image-rendering:-moz-crisp-edges;
    -ms-interpolation-mode:nearest-neighbor;
}

W3C 规范。

更新

看起来 Firefox 希望在财产。

Answer 2

您可以使用 css3 background-size 属性：

.iconsbig {
  background-image:url(http://site.org/icons.png);
  background-size: 20px 20px;
}