css sprites精灵图、css图片整合、css贴图定位案例教程

时间 2019-11-30

标签 css sprites 精灵图片整合定位案例教程栏目 CSS 繁體版

原文原文链接

1、 什么是css sprites css

CSS Sprites一般被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。就是将导航的背景图，按钮的背景图等有规则的合并成一张背景图，即多张图合并为一张整图，而后再利用background-position进行背景图定位的一种技术。html

2、为何须要css sprites bash

CSS Sprites 并非一门新的技术了，目前他发展的已经比较成熟，阿里巴巴、百度、谷歌等各公司的网页中处处均可以发现CSS Sprites 的影子。他是网页里常见的一种图片应用处理方式，他容许你将一个页面里所涉及到的所=有的零星的图片都整合到一张大图中去，这样一来，当访问这个页面时，所加载的图片就不会像之前那样一张一张的慢慢显示出来了，对于当前的网络所流行的速度来讲，不超出200kb的单张图片所须要的加载时间基本是差很少的，节省加载速度的关键不是下降重量，而是减小个数，就由于计算机都是按照byte计算。页面每显示一张图片都会向服务器发送一次请求。因此，图片越多，所请求的次数就越多。为了减小HTTP的请求次数，不少网站的导航背景图、登陆框、按钮背景图等并不使用服务器

不少网站的导航栏图标、登陆框图片等，使用的并非<img>标签，而是CSS Sprite。本课程分析了CSS Sprite的实现原理，详细讲解制做方法，实现完整效果，让你快速掌握CSS Sprite技术。网络

3、CSS Sprites的优点工具

在不少状况下，它有着必定的优点，最重要的是它能够减轻服务器的负担，提升网页的加载速度。布局

由于假咱们如今有9张小图片，（例1）那么就会就有9个HTTP请求，可是若是把这九张小图放在一张大图里，那就只须要请求1次，由于你要的9个小图都在一张大图里了，请求一次后不用再次发送HTTP请求去请求图片资源。性能

例1.学习

当页面加载时，不是去加载每个单独的图片，而是一次加载整个组合图片。它大大减小了HTTP请求的次数，减轻服务器的压力，同时也缩短了悬停时候加载图片所须要的时间延迟，使效果更流畅。网站

随着页面设计向着精致、巧妙的方向发展，便开始考虑用非Js的方法制做鼠标滑过、悬停菜单的效果，这时精灵图应运而生。

先看效果：

首先，是在正常模式下浏览：

而后，是在鼠标悬停的时候浏览：

最后，是在鼠标点击连接的时候浏览：

这样过渡的很是天然。具体用到的图片以下：

其实，刚才的鼠标悬停和点击连接的图片切换，就是经过位置控制取自bg2_btn.jpg，下面是具体实现方法：

首先是html页面源代码：

代码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>nav</title> 
<link href="mydemo.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div> 
    <img src="image/logo/logo2.jpg" alt="wenqi's blog" /> 
</div> 
<!------- 导航2 -------> 
<div class="menu2"> 
    <div class="left2"></div> 
    <div class="center2"> 
        <a href="#">Blog</a> 
        <a href="#">Themes</a> 
        <a href="#">Service</a> 
        <a href="#">About</a> 
        <a href="#">Help</a>  
    </div> 
    <div class="right2"></div> 
    <div class="clear"></div> 
</div> 
</body> 
</html> 

其次就是css的代码： 

代码以下:

html 
{ 
width:100%; 
height:100%; 
} 
body 
{ 
background-color:#fff; 
font-size:18px; 
font-family:"Arial","Tahoma","微软雅黑","雅黑"; 
line-height:18px; 
padding:0px; 
margin:0px; 
text-align:center; 
} 
/* www.codefans.net */ 
a 
{ 
display:block; 
float:left; 
} 
del,div.clear 
{ 
height:0px; 
font-size:0px; 
line-height:0px; 
padding:0px; 
margin:0px; 
display:block; 
clear:both; 
overflow:hidden; 
} 
div 
{ 
width:550px; 
text-align:left; 
margin:auto auto auto auto; 
} 
.menu2 
{ 
font-size:14px; 
line-height:14px; 
margin-bottom:24px; 
} 
.menu2 .left2 
{ 
width:5px; 
height:47px; 
background:url("image/navigation/bg2_left.jpg") no-repeat left top; 
float:left; 
} 
.menu2 .center2 
{ 
width:540px; 
height:47px; 
background:url("image/navigation/bg2_center.jpg") repeat-x left top; 
float:left; 
} 
.menu2 .right2 
{ 
width:5px; 
height:47px; 
background:url("image/navigation/bg2_right.jpg") no-repeat left top; 
float:left; 
} 
.menu2 a:link,.menu2 a:visited 
{ 
color:#585858; 
width:77px; 
height:30px; 
padding-top:17px; 
background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; 
text-align:center; 
text-decoration:none; 
} 
.menu2 a:hover 
{ 
color:#fff; 
background-position:left 0px; 
} 
.menu2 a:active 
{ 
color:#fff; 
background-position:left -47px; 
} 
复制代码

其实主要的是这一段：

代码以下:

.menu2 a:link,.menu2 a:visited 
{ 
color:#585858; 
width:77px; 
height:30px; 
padding-top:17px; 
background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; 
text-align:center; 
text-decoration:none; 
} 
复制代码

利用了图片整合图，将图片通过准确的切割，并且使用background-position来控制，就能够作到js的控制效果。

要作出这种效果还要学习怎样把小图排版成大图，以便于更容易去测量位置，且不会互相影响。

例2.

谷歌：

土豆：

淘宝：

其中小图之间的排版是有些点规律的，好比说淘宝这张，相似的小图都放置成同一列，这样就计算小图显示位置的时候，只须要知道第一个小图标的位置就能够了，同一列的小图， X坐标同样，只须要改Y坐标的位置。这样就方便了许多。用到的css属性是background-image、background-position、background-repeat、这几个属性。或者使用background这个复合属性写在一块儿就好。

利用CSS Sprites能很好地减小了网页的http请求，从而大大的提升了页面的性能，这是CSS Sprites最大的优势，也是其被普遍传播和应用的主要缘由；我的认为CSS Sprites能减小图片的字节，我曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。

4、css sprites实例示例教程

一、素材与要实现的效果

二、sprites实例教程解释介绍

首先这些素材图标都是用ps放在同一张图片上，而后实现成列表类布局。使用css sprites实现此布局而后使用background样式进行实现。

此导航的布局咱们使用ul 无序列表进行布局，每一个li站一行排版，对ul设置padding实现四周内容与边框必定间距效果，由于每一个li前面图标不一样，但此背景图片是拼合在一张图片上，因此这里作li里开始使用SPAN标签实现不一样图标的效果，每一个列表项的图标不相同为了区别因此对span设置不一样class名，不一样class对应设置定位相应的图标。

三、实例教程准备 1）、图标素材，这里直接为你们提供拼接好的图标素材图片一张，命名为“bg.png”，以下图，可直接另存为保存使用。

四、先写布局，再css sprites设置不一样背景图标样式

html代码：

<ul class="Sprite"> 
    <li><span class="a1"></span><a href="#">个人主页</a></li> 
    <li><span class="a2"></span><a href="#">新闻头条</a></li> 
    <li><span class="a3"></span><a href="#">电视剧</a></li> 
    <li><span class="a4"></span><a href="#">最新电影</a></li> 
    <li><span class="a5"></span><a href="#">小说大全</a></li> 
    <li><span class="a6"></span><a href="#">旅游度假</a></li> 

</ul> 
复制代码

为了区别不一样效果，对不一样的span标签加入不一样的class名称。

css代码：

ul { margin:0 auto;border:1px solid #F00;width:300px; padding:10px;} 
ul li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden; float:left;} 
ul li span{ float:left; width:17px;padding-top:5px;height:17px;  
overflow:hidden;background:url(bg.png) no-repeat} 
ul li a{ padding-left:5px}
复制代码

css sprite关键代码与解释

首先在ul li span里插入背景图 ul.Sprites li span{ background:url(bg.png) no-repeat} 给span设置背景图片。再分别对不一样span class设置对于图标背景定位具体值 ul li .a1{ background-position: -62px -32px}设置背景图片做为对应盒子对象背景后向左“移动”62px，向上“移动”32px开始显示此背景图标 ul li .a2{ background-position: -86px -32px}设置背景图片做为对应盒子对象背景后向左“移动”86px，向上“移动”32px开始显示此背景图标 ul li .a3{ background-position: -110px -32px}设置背景图片做为对应盒子对象背景后向左“移动”110px，向上“移动”32px开始显示此背景图标 ul li .a4{ background-position: -133px -32px}设置背景图片做为对应盒子对象背景后向左“移动”133px，向上“移动”32px开始显示此背景图标 ul li .a5{ background-position: -158px -32px}设置背景图片做为对应盒子对象背景后向左“移动”158px，向上“移动”32px开始显示此背景图标

重点：背景background-position属性有两个值，第一个表明水平位置的值（可为正可为负），第二个表明垂直方向的值（可为正可为负），当为正数时，表明背景图片做为对象盒子背景图片时靠左和靠上多少开始显示背景图片；当为负数时表明背景图片做为盒子对象背景图片，将背景图片超出盒子对象左边多远，超出盒子对象上边多远开始显示此背景图片。

CSS sprites技巧技术总结

CSS sprites其实就是对background样式的扩展应用，之前设置背景图位置时常见为正数，设置背景靠左靠上距离多少像px开始显示图片，为负数值后，是将图片拖离左边上边多少像素开始显示图片，同时须要学会photoshop工具精确量出距离值。