具有动态调整大小的 CSS 精灵

我决定为我的整个网站（+-30 个图像）创建一个精灵表，这样我就可以加载 1 个图像并仅加载参考位置，从而减少图像加载时间和服务器调用。

我的问题： 是否可以引用 sprite 表中的图像，然后将该图像调整为其父容器的 100%？

例如：

#SomeDiv
{
    background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat;
    width:100px;
}

我的 div 的宽度是 100px，但我想要引用的精灵是 20px（例如） - 如何使提取的精灵增长到 100px？

问候， 拜伦·科布.

好吧，如果你really想要一个答案，当然，为什么不呢。看：http://jsfiddle.net/3dsgn/3/ http://jsfiddle.net/3dsgn/3/

基本上我们在这里使用 CSS3，所以 IE 支持（9 除外）是不存在的。您还必须使用带有-moz-适用于 Firefox 3.6 及更低版本的扩展。技术本身也有些麻烦。实际上你必须自己去计算数字——百分比自然是行不通的。

#sprite-large {

    /* All of these numbers are 2x their normal, 
       though tweaked slightly so that they will look okay */
    width: 36px;
    height: 36px;
    background: url('url/to/your/image.png') -38px -112px;

    -moz-background-size: 448px 368px;
    background-size: 448px 368px;
}