resize - 如何通过 CSS 3 调整和放大图像(如 Sprite 图标)？

Question

亲爱的 friend 们。想象一个名为 icons.png 的 Sprite 图像分配给 css 类 .icons 具有各种 10x10px 图形。现在你想要另一个类将 Sprite 图形精确放大两倍 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

是supported除了 < IE9...

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

W3C spec .

更新

Looks like Firefox 希望在该属性上使用其供应商前缀 (-moz)。