A-A+

CSS_Sprite图像拼接技术

2015年08月06日 Web前端 CSS_Sprite图像拼接技术已关闭评论 阅读 407 次

CSS_Sprite图像拼接技术

1.sprite概述

CSSSprite是一种利用CSS特性对网页中图片进行的特殊处理的运用方式,主要是将多张零星图片综合到一张图片中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

2.sprite的优缺点

优点:减少网页http请求,提高页面性能,降低服务器负载;文件命名减少麻烦。

缺点:定位繁琐,拼接和测量零碎的图片是一项耗时的工作,布局固定,降低网页弹性。

3.sprite的使用方法:

a)定位要使用的小图片:

在PS中,右上角选—设计,然后点信息,我们把鼠标放到图片上,便可看到像素的X与Y值,还可以用矩形工具拉出一个矩形,查看它的width与height值。更为方便实用的方法是使用CSS图像拼接测量网站spritecow精灵牛(http://www.spritecow.com/),你只需将拼接好的图片上传到该网站,它就会根据图片的区块为你自动的测量非常的方便。

bCss中使用该图片:

代码中div的width和height值是你要显示的区域的长和高,background-position:X Y的值就是鼠标放到你要显示的小图标的左上角的横坐标和纵坐标,特别注意:有负号

c)示例:假设你有四个不同的浏览器图标,用css布局将它们四个图标并排在一起:

 

通常情况下可能我们会将这四个图标单独切出来然后在四个li中附上四个不同的class类

对于html结构可能我们会这样写:

<div id="browser">

<ul>

<li><ahref="#">safari</a></li>

<li><ahref="#">firefox</a></li>

<li><ahref="#">chrome</a></li>

<li><ahref="#">ie</a></li>

</ul>

然后根据四个不同的li载入不同的图标css结构:

#browser{

padding-top:20px;

}

#browser ul {

text-indent:-9999px;

width:960px;

margin:0 auto;

}

#browser ul li{

float:left;

display:block;

width:142px;

height:139px;

margin-left:60px;

}

#browser ul li a {

text-indent:-9999px;

}

#browser ul li.safari {

background: url(images/safari.png) no-repeat;

}

#browser ul li.firefox {

background: url(images/firefox.png) no-repeat;

}

#browser ul li.chrome {

background: url(images/chrome.png) no-repeat;

}

#browser ul li.ie {

background: url(images/ie.png) no-repeat;

}

这样做浏览器为了加载图像,http就会发出四次请求。如果我们使用css sprite图像拼接技术就会减少三次请求从而大大的节省加载时间。

首先我们将四个图标用Photoshop拼接在一起,并且用魔棒工具将白色的背景删除,即背景必须是透明的因为,稍后介绍的spritecow是不识别有颜色的背景的。

存储为png背景透明格式;

 

打开spritecow精灵牛网站点击 open image按钮加载你刚才保存好的图片 brwoser.png;

 

这时就可以对每个图标进行点击,当你点击图标的时候精灵牛就会自动帮你测算出图标背景的水平坐标和纵坐标的距离以及图标的宽度与高度。直接将背景位置的测量值拷贝到css样式中了。以下是使用css sprite图像拼接的样式

#browser{

padding-top:20px;

}

#browser ul {

text-indent:-9999px;

width:960px;

margin:0 auto;

}

#browser ul li{

float:left;

display:block;

width:142px;

height:139px;

margin-left:60px;

background:url(images/browser.png) no-repeat;

}

#browser ul li.safari {

background-position: 0px -4px ;

}

#browser ul li.firefox {

background-position:-169px -4px ;

}

#browser ul li.chrome {

background-position:-342px -4px ;

}

#browser ul li.ie {

background-position:-517px -4px ;

}

说明一下:background-position:0px -4px no-repeat;  0px 为横坐标,即图标相距最左边的距离,-4px为纵坐,即图标相距最上方的距离。

4.sprite有三个简单的应用:

a)减少图片限制:将多个相似图片综合在一张图片里,CSS Sprite的主要做用,以尽量减少图片数量为前提。
b)单图滚动:即在一张图片中把多种状态合并,然后再使用CSS定位背景图技术模拟动态效果。就像图二中的上下箭头一样,在默认状态下使用背景图的下箭头部分,鼠标悬浮或点击后使用背景图中的上箭头部分。
c)延长背景:如果页面中存在平铺背景图的效果,并且带有边角,可以在一张图片中结合平铺的背景和边角,再利用CSS背景定位实现,例如图二中最顶部的背景条。

标签:

评论已关闭!

Copyright © 极品飞鸽 保留所有权利.   Theme  Ality 蜀ICP备14015766号-1

用户登录

分享到: