具有动态大小调整的CSS Sprites

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)不存在.您还必须使用具有-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;
}