CSS Sprite
2011-09-25 21:01:09
比起CSS雪碧俺更喜欢可乐，好，废话少说，上正题！
按度娘百科的解释CSS雪碧就是酱紫滴： 把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
比如：
我们把CSS里的p{}改一下
.sprite-01{ background-position: 0 0; width: 400px; height: 400px; } .sprite-02{ background-position: 0 -450px; width: 400px; height: 400px; } .sprite-03{ background-position: 0 -900px; width: 400px; height: 400px; } .sprite-logo{ background-position: 0 -1350px; width: 600px; height: 600px; }从上至下每个图片的css 雪碧的“坐标” 这里留一个CSS sprite 在线生成的地址
CSS 图片拼合生成器
按度娘百科的解释CSS雪碧就是酱紫滴： 把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
比如：
<body>然后CSS里酱紫滴
<p>1234567890-123456789</p>
</body>
p{
background-image:url(css.png);
background-repeat:no-repeat;
background-position:0 -450px; width: 400px; height: 400px; }我们把CSS里的p{}改一下
p{ background-image:url(css.png); background-repeat:no-repeat; background-position:0 0; width: 400px; height: 400px;}
上css.png图片，就是CSS拼合后的图片 
.sprite-01{ background-position: 0 0; width: 400px; height: 400px; } .sprite-02{ background-position: 0 -450px; width: 400px; height: 400px; } .sprite-03{ background-position: 0 -900px; width: 400px; height: 400px; } .sprite-logo{ background-position: 0 -1350px; width: 600px; height: 600px; }从上至下每个图片的css 雪碧的“坐标” 这里留一个CSS sprite 在线生成的地址
CSS 图片拼合生成器