CSS Sprites与动态大小 [英] CSS Sprites with Dynamic Sizing

问题描述

我决定为我的整个网站（+ -30图片）加载一张sprite工作表，因此我可以加载1张图片和参考位置，从而减少图片加载时间和服务器调用次数。

I've decided to crate a sprite sheet for my entire site (+-30 images) so I can load 1 image and just reference positions, which reduces image load time and server calls.

我的问题：
是否可以在精灵表中引用一个图像，然后将该图像的大小设置为其父容器的100％？

My question: Is it possible to reference an image in the sprite sheet and then size that image to 100% of its parent container?

因此，例如：

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

我的div的宽度是100px，但我想要引用的精灵是20px（例如） - 我如何将提取的精灵扩展到100像素？

The width of my div is 100px, but the sprite I want to reference is 20px(for example) - how can I streth the extracted sprite to grow to 100px?

尊敬的，
Byron Cobb。

Regards, Byron Cobb.

推荐答案

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

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

Basically we're working with CSS3 here, so IE support (except 9) is non-existent. You'll also have to use the version with the -moz- extension for Firefox 3.6 and below. The technique itself is also somewhat troublesome. You actually have to go and calculate the numbers yourself - percentages won't work, naturally.

#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与动态大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！