码迷,mamicode.com
首页 > Web开发 > 详细

css sprites (css拼图合成)使用

时间:2014-09-19 17:00:15      阅读:616      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   strong   for   

什么是css sprites

     页面上的 ICON,栏目背景,图片按钮有规则的合并一张背景图

     用background-position来实现背景图片的定位

常用css sprites工具

1、CSS Satyr

     可以拖动排列/自动生成CSS大图片

     下载地址

                                           bubuko.com,布布扣

                                         bubuko.com,布布扣

.pic {background-image: url("CSS Satyr.png"); display: block;}
.pic_5 {background-position: -140px -0px; width: 16px; height: 16px; }
.pic_1 {background-position: -0px -0px; width: 16px; height: 16px; }
.pic_2 {background-position: -35px -0px; width: 16px; height: 16px; }
.pic_3 {background-position: -70px -0px; width: 16px; height: 16px; }
.pic_4 {background-position: -105px -0px; width: 16px; height: 16px; }

 

2、CSS 图片拼合生成器

     在线合成工具

      下载地址

css sprites (css拼图合成)使用

标签:style   blog   http   color   io   os   使用   strong   for   

原文地址:http://www.cnblogs.com/sumbud/p/3981656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!