且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

CSS Sprites与动态大小

更新时间:2023-10-28 12:40:28

好吧,如果你真的想要一个答案,肯定,为什么不。请参阅: 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;
}