我决定为我的整个网站创建一个精灵表(-30图像),这样我就可以加载1个图像,只需加载参考位置,这样可以减少图像加载时间和服务器调用.
我的问题：
是否可以在精灵表中引用图像,然后将该图像调整为其父容器的100％？
所以例如：
#SomeDiv
{
background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat;
width:100px;
}
我的div的宽度是100px,但我要引用的精灵是20px(例如) – 我怎样才能将提取的精灵拉伸到100px？
问候,
拜伦科布.
解决方法
好吧,如果你真的想要答案,当然可以,为什么不呢.见：
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;
}
