代码之家 › 专栏 › 技术社区 › Bob

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

sprite css

Bob · 技术社区 · 15 年前

我决定用板条箱装一张sprite工作表,用于整个站点(+-30个图像),这样我可以加载1个图像,只加载参考位置,从而减少图像加载时间和服务器调用。

我的问题: 是否可以引用sprite工作表中的图像,然后将该图像大小调整为其父容器的100%?

例如:

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

我的DIV的宽度是100px,但我要引用的sprite是20px(例如)——如何将提取的sprite拉伸到100px?

当做, 拜伦·科布。

1 回复 | 直到 15 年前

Yi Jiang G-Man 15 年前

好吧,如果你 真正地 当然,想知道答案,为什么不呢。见: http://jsfiddle.net/3dsgn/3/

基本上,我们在这里使用CSS3,所以IE支持(除了9)是不存在的。您还必须将该版本与 -moz- 火狐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;
}

推荐文章