蓝叶

CSS Sprites具体应用新手教程

CSS Sprites是个网页图片处理技术，国人也叫此为CSS精灵，这个技术已经有些年头了，如果你的网站设计的时候，使用的小图片小图标特别多，那么建议还是用用CSS Sprites技术来处理你的图片吧，用它的好处可以节省你网站服务器的资源，提高访问速度等，这个方法虽好也有利有弊，就是合并的大图如果想更换某个图标不是很方便，如果你网站设计样式使用的图标少，就可以忽略此方法了；下面简单介绍下CSS Sprites具体应用的教程，新手可以看看以做参考，老手就路过吧；就拿我博客头部右侧的几个图标来说吧，我就是应用了CSS Sprites技术，具体的CSS代码如下：

#icoyinyue,#icoqq,#icotqq{background: url(images/topico.png) no-repeat 0 0;}
#icoyinyue{background-position: 0 -64px;}
#icoqq{background-position: 0 -95px;}
#icotqq{background-position: 0 -32px;}

这个CSS意思是首先把#icoyinyue、#icoqq、#icotqq三个样式的背景同意设置为一个大图，然在再单独设置每个样式的背景图片位置就行了，background-position: 0 -64px意思就是设置这个样式的背景图片的X值和Y值，上面这些都好说，关键在于图片的位置定位有难度，如果才能正确定位图片位置正确的显示出所需要调用的图片呢，下面请看蓝叶写的一些新手初级教程；把需要的图片整理好合并到一个大图中去，背景设置为透明色，使用PS打开如图所示，每个图片中间要有些间隔不要挨得太近，

鼠标点击PS左侧工具中的切片工具，把每个小图片切片，如下图所示我已经切好了的图片，

接着使用鼠标右键选择PS左侧工具中的切片选择工具，然后使用切片选择工具选中一个切片，对准切片鼠标右键弹出菜单中选择编辑切片选项，如下图所示：

选择编辑切片选项，打开切片选项窗口，如下图所示红圈中的X值和Y值就是这个小图片的具体位置坐标，使用(background-position: X值 Y值)就可以准确定位你所需要显示的图片了。

这是一个手动获取定位的方法，也不是那么简单，如果你想要更简单点就使用我以前写的一个分享CSS Sprites在线工具的文章，使用那个在线工具可以轻松获取图片的位置CSS代码；文笔有限写的不好，如果你不没看明白，随时呼我为你解答。

评论一下 分享本文 赞助蓝叶

赞助蓝叶X

联系站长

• 版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《蓝叶》。
• 本文网址：https://lanye.org/web/385.html
• 上篇文章：同胞们感冒了可千万不要乱吃药
• 下篇文章：百度云音乐免费送VIP会员一月
• 新手教程