Question

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

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

所以例如：

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

我的div的宽度是100px，但我要引用的精灵是20px（例如） - 我怎样才能将提取的精灵拉伸到100px？

此致 Byron Cobb。

Answer 1

好吧，如果你真的想要一个答案，那么，为什么不呢。请参阅：http://jsfiddle.net/3dsgn/3/

基本上我们在这里使用CSS3，因此IE支持（9除外）不存在。对于Firefox 3.6及更低版本，您还必须使用-moz-扩展名的版本。该技术本身也有点麻烦。你实际上必须自己去计算数字 - 百分比自然不会起作用。

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

具有动态大小调整的CSS Sprites

1 个答案: