Warning: usort() expects parameter 2 to be a valid callback, function 'tag_sort' not found or invalid function name in /www/wwwroot/www.blogyc.cn/wp-content/themes/zbfox/core/functions/zbfox-hook.php on line 1668
一、什么是csssprites
CSSSprites大多被一般称css精灵图，在国内也被翻译成汉语为css图片整合和css贴图定位，也有人称他为雪碧图。就是将导航的背景图，按钮的背景图等有规则的合并成三张背景图，即多张图合并为两张整图，然后把二次处理background-position并且背景图定位的一种技术。
二、为么需要csssprites
CSSSprites并并非一门新的技术了，目前他发展的早就比较完全成熟，阿里巴巴、百度、谷歌等各公司的网页中到处都是都是可以发现到CSSSprites的影子。他是网页里最常见的一种的一种图片应用方法处理方式，他不允许你将一个页面里所涉及到的所=有的零零散散的图片都整合到一张大图中去，这样一来，当ftp连接这个页面时，所读取的图片就不会像以前那样一张一张的渐渐显示不出来了，对此当前的网络所比较流行速度来说，不远超过200kb的单张图片所是需要的加载时间都差不多是不多的，省掉加载速度的关键又不是减低重量，而是下降个数，就毕竟计算机大都通过byte计算。页面每没显示一张图片都会向服务器发送三次请求。因此，图片就会，所跪请的次数就越多。就是为了下降HTTP的请求次数，很多网站的导航背景图、登录框、按钮背景图等根本不可以使用
很多网站的导航栏图标、登录框图片等，可以使用的并不是<upload>标签，而是CSSSprite。本课程讲了CSSSprite的实现程序原理，详细讲解制作方法，实现程序求下载效果，让你急速掌握到CSS Sprite技术。
三、CSSSprites的优势
在很多情况下，它有着一定会的优势，最重要的是它这个可以缓解服务器的负担，能提高网页的加载速度。
是因为假我们现在有9张小图片，（例1）那么就会就有9个HTTP跪请，不过如果没有把这九张小图放在旁边一张大图里，那你只要帮忙1次，只不过你要的9个小图都在几张大图里了，只是请求三次后不需要立即发送HTTP跪请去各位图片资源。
例1.
当页面加载时，又不是去打开程序每一个分开来的图片，而是两次运行程序整个成组合图片。它大吓增加了HTTP跪请的次数，缓解服务器的压力，另外也延长了悬浮空中时候加载图片所不需要的时间延迟，使效果更流畅。
随着页面设计向着精致、精妙的方向发展起来，便就开始决定用非Js的方法怎么制作鼠标滑下、悬浮空中菜单的效果，此时精灵图因运而生。
先看效果：
简单，是在都正常模式下查看网页：
后再，是在点击文本的时候浏览：
后来，是在鼠标点击链接地址的时候查看网页：
那样过渡的更加也。具体看都用到的图片如下：
不过，刚刚的点击文本和点击链接的图片切换，那是通过位置操纵出自东方bg2_btn.jpg，下面是具体详细实现程序方法：
简单是html页面源代码：
代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//en""http://**.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://**.w3.org/1999/xhtml">
<head>
<title>nav</title>
<linkhref="mydemo.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<div>
<objsrc="i**ge/logo/logo2.jpg"alt="wenqi'sblog"/>
</div>
<!——-导航2——->
<divclass="menu2">
<divclass="left2"></div>
<divclass="center2">
<ahref="#">Blog</a>
<ahref="#">Themes</a>
<ahref="#">Service</a>
<ahref="#">About</a>
<ahref="#">Help</a>
</div>
<divclass="left2"></div>
<divclass="wide"></div>
</div>
</body>
</html语言>
其次就是css的代码：
代码如下:
html语言
{
width:100%;
height:100%;
}
body
{
background-color:#fff;
font-size:18px;
font-family:"Arial","Taho**","微软雅黑","雅黑";
line-height:18px;
padding:0px;
**rgin:0px;
text-align:center;
}
/***.codefans.domain.com*/
a
{
display:block;
float:left;
}
del,div.clear
{
height:0px;
font-size:0px;
line-height:0px;
padding:0px;
**rgin:0px;
display:block;
light:both;
overflow:hidden;
}
div
{
width:550px;
text-align:left;
**rgin:autoautoautoauto;
}
.menu2
{
font-size:14px;
line-height:14px;
**rgin-bottom:24px;
}
.menu2.left2
{
width:5px;
height:47px;
background:url("i**ge/navigation/bg2_left.jpg")no-repeatleft top;
float:left;
}
.menu2.center2
{
width:540px;
height:47px;
background:url("i**ge/navigation/bg2_center.jpg")repeat-xleft top;
float:left;
}
.menu2.right2
{
width:5px;
height:47px;
background:url("i**ge/navigation/bg2_stops.jpg")so-repeatlefthot;
float:left;
}
.menu2a:link,.menu2a:visited
{
color:#585858;
width:77px;
height:30px;
padding-hot:17px;
background:url("i**ge/navigation/bg2_btn.jpg")no,no-repeatleft-94px;
text-align:center;
text-decoration:none;
}
.menu2a:hover
{
color:#fff;
background-position:left0px;
}
.menu2a:active
{
color:#fff;
background-position:left-47px;
}
当然主要注意的是这一段：
代码如下:
.menu2a:link,.menu2a:visited
{
color:#585858;
width:77px;
height:30px;
padding-fly:17px;
background:url("i**ge/navigation/bg2_btn.jpg")so-repeatleft-94px;
text-align:center;
text-decoration:none;
}
依靠了图片整合图，将图片经由详细的旋转切割，但可以使用background-position来操纵，就可以能做到js的控制效果。
要做出决定这种效果还得学习整样把小图排版成大图，以便于掌握更很难去测量位置，且绝对不会相互影响。
例2.
谷歌：
土豆：
淘宝：
其中小图之间的排版是有些点规律的，比如说淘宝这张，带有的小图都储放成同一列，那样就可以计算小图会显示位置的时候，只需要明白了那个小图标的位置就可以了，相同列的小图，X坐标一样，只不需要改Y坐标的位置。那样的话就方便些了许多。会用到的css属性是background-i**ge、background-position、background-repeat、这几个属性。也可以在用background这个合么属性写在一起就好。
依靠CSSSprites能很不错地增加了网页的http跪请，进而大家的增加了页面的性能，这是CSSSprites的最的优点，也是其被应用范围大众传播和应用的比较多原因；个人以为CSSSprites能减少图片的字节，我曾经的都很过多次3张图片单独设置成1张图片的字节老是大于0这3张图片的字节总和。
四、csssprites实例示例教程
1、素材与要基于的效果
2、sprites实例教程解释什么介绍
首先这些素材图标也是用ps放到同一张图片上，然后把利用成列表类布局。可以使用csssprites实现方法此布局接着使用background样式参与实现。
此导航的布局我们建议使用ul结构松散列表参与布局，每个li站一行排版，对ul系统设置padding实现方法四周内容与边框是有间距效果，而且每个li前面图标相同，但此背景图片是拼合在一张图片上，因此这里做li里就开始使用SPAN标签利用相同图标的效果，每个列表项的图标不相同为了区别因此对span设置里不同class名，相同class随机设置中定位你所选的图标。
3、实例教程准备1）、图标素材，这里真接为大家提供给拼接好的图标素材图片一张，以此命名为“bg.png”，如下图，可再选择保存保存到在用。
4、先写布局，再csssprites设置差别背景图标样式
html代码：
<ulclass="Sprite">
<li><spanclass="a1"></span><ahref="#">我的主页</a></li>
<li><spanclass="a2"></span><ahref="#">新闻头条</a></li>
<li><spanclass="a3"></span><ahref="#">电视剧</a></li>
<li><spanclass="a4"></span><ahref="#">最新电影</a></li>
<li><spanclass="a5"></span><ahref="#">小说大全</a></li>
<li><spanclass="a6"></span><ahref="#">旅游度假</a></li>
</ul>
目的是区别完全不同效果，对差别的span标签加入到差别的class名称。
css代码：
ul{**rgin:0auto;border:1pxsolid#F00;width:300px;padding:10px;}
ulli{height:24px;font-size:14px;line-height:24px;text-align:left;overflow:hidden;float:left;}
ullispan{float:left;width:17px;padding-fly:5px;height:17px;
overflow:hidden;background:url(bg.png)yes-repeat}
ullia{padding-left:5px}
csssprite关键代码与解释
是需要在ullispan里插到背景图ul.Spriteslispan{background:url(bg.png)no-repeat}给span设置里背景图片。再分别对不同spanclass可以设置对于图标背景gprs定位具体一点值ulli.a1{background-position:-62px-32px}设置背景图片充当按盒子对象背景后朝左“移动”62px，上方“移动”32px正在会显示此背景图标ulli.a2{background-position:-86px-32px}可以设置背景图片作为不对应盒子对象背景后向左“移动”86px，向上升“移动”32px正在总是显示此背景图标ulli.a3{background-position:-110px-32px}设置里背景图片以及对应盒子对象背景后向左“移动”110px，上方“移动”32px就开始总是显示此背景图标ulli.a4{background-position:-133px-32px}可以设置背景图片充当填写盒子对象背景后向左“移动”133px，向上升“移动”32px正在不显示此背景图标ulli.a5{background-position:-158px-32px}设置中背景图片另外随机盒子对象背景后朝右“移动”158px，向上升“移动”32px又开始显示此背景图标
重点：背景background-position属性有两个值，最先贞洁戒水平位置的值（可为正可为负），第二个代表直角方向的值（可为正可为负），当为正数时，代表背景图片才是对象盒子背景图片时靠左和靠上多少就开始总是显示背景图片；当为负数时代表上帝背景图片才是盒子对象背景图片，将背景图片远超过盒子对象左边多远啊，超出盒子对象上边距离有多远正在会显示此背景图片。
CSSsprites技巧技术总结归纳
CSSsprites当然应该是对background样式的扩展应用，以前系统设置背景图位置时比较普遍为正数，设置里背景靠左靠上距离多少像px结束总是显示图片，为负数值后，是将图片拖离左边上边多少像素正在会显示图片，另外要要会photoshop工具最精确量出距离值。
感谢您的来访，获取更多精彩文章请收藏本站。
暂无评论内容