1. 什么是CSS Sprite?
CSS Sprite 译为图片精灵,由称“雪碧图”,是一种网页图片应用的处理方式,简单来说就是把几张图拼成一张图而已。
它提供了一种把很多小图片拼成一张大图片的,从而在低并发的浏览器上达到快速传输并呈现内容的目的。
2. CSS Sprite的作用:
它最大的作用就是可以有效的减少http请求数量,加速显示内容。
因为每发一次http请求,就会和服务器连接一次,建立连接是需要额外的访问时间的,如果数量非常大就会造成网页性能上的不足,所以使用CSS Sprite,其实是网页提高性能的一个非常有效的途径。
3. CSS Sprite的使用规则:
(1)一般用于不随用户信息的变化而变化的静态图片。
(2)一般是小图片,但是图片容量比较大的。
(3)还有就是加载量比较大的图片。
(4)一般大图不建议拼成雪碧图(比如一些页面的轮播图之类的大图)。
4. CSS Sprite的原理:
主要就是利用css的background-position等属性进行背景定位。因为background-position:x坐标值 y坐标值 ,能精确的定位出背景图片在布局盒子中的位置。
5. CSS Sprite的不足:
首先是要想生成雪碧图比较麻烦,然后定位的准确位置必须经过测量才能确定,还有可能就是维护的时候,如果背景图片改变,那么可能雪碧图也必须得跟着改。
当然,一般我们按照上面的使用规则来使用雪碧图的话,雪碧图的使用还是很好的。
6. CSS Sprite生成工具
既然CSS Sprite是将许多张图合并成一张大图,那么可定有相应的工具,而我使用的是一个叫CssGaga的工具,具体请参考: http://www.99css.com/1524/
7. CSS Sprite 的应用
示例一:
有这么一张雪碧图:
实现这么一个效果:
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css sprite</title>
<style>
.cat{
width: 150px;
background: #f8f8f8;
border: 1px solid #bbb;
}
ul,h3{
list-style: none;
margin: 0;
padding: 0;
}
li{
display: block;
height: 31px;
line-height: 31px; /*值和height设置一样,使得文字能够垂直居中*/
overflow: hidden;
border-bottom: 1px solid #dedede;
}
li i{
background: url(./sprite_img.png);
display:inline;
width: 30px;
height: 24px;
float: left;
margin: 3px 10px 0 0;
}
li h3{
font-size: 14px;
font-weight: 400px;
}
.cat-1 i{ background-position: 0 0; }
.cat-2 i{
background-position: 0 -24px; /*每个小图片的高度是24px*/
}
.cat-3 i{ background-position: 0 -48px; }
.cat-4 i{ background-position: 0 -72px; }
.cat-5 i{ background-position: 0 -96px; }
.cat-6 i{ background-position: 0 -120px; }
.cat-7 i{ background-position: 0 -144px; }
.cat-8 i{ background-position: 0 -168px; }
.cat-9 i{ background-position: -40px 0; }
</style>
</head>
<body>
<div class="cat">
<ul>
<li class="cat-1">
<i></i>
<h3>服装内衣</h3>
</li>
<li class="cat-2">
<i></i>
<h3>鞋包配饰</h3>
</li>
<li class="cat-3">
<i></i>
<h3>运动户外</h3>
</li>
<li class="cat-4">
<i></i>
<h3>珠宝手表</h3>
</li>
<li class="cat-5">
<i></i>
<h3>手机数码</h3>
</li>
<li class="cat-6">
<i></i>
<h3>办公家电</h3>
</li>
<li class="cat-7">
<i></i>
<h3>护肤彩妆</h3>
</li>
<li class="cat-8">
<i></i>
<h3>母婴用品</h3>
</li>
<li class="cat-9">
<i></i>
<h3>其他分类</h3>
</li>
</ul>
</div>
</body>
</html>
示例二:
直接用html+css实现一个表单页面如下:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>no sprite form</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin: 0;padding: 0;
list-style: none;
font-size: 14px;
font-family: "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma";
}
.form{
width: 300px;
height:auto;
margin: 10px;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
}
.username, .password{
margin: 5px 5px 5px 0;
width:99%;
height: 35px;
border:1px solid #000;
border-radius: 5px;
background-color: #eef;
}
.check{
margin: 10px;
font-size: 12px;
}
.login,.register{
width:100%;
height: 40px;
margin-top: 15px;
border-radius: 5px;
}
.login{
background-color: #6495ed;
}
.register{
background-color: #3cb371;
}
</style>
</head>
<body>
<div class="form">
<form action="">
<label>用户名:</label>
<input class="username" type="text" placeholder="邮箱/手机号/用户名"><br>
<label>密 码:</label>
<input class="password" type="password" placeholder="请输入密码"><br>
<label><input class="check" type="checkbox">记住密码</label>
<label><input class="check" type="checkbox">下次自动登录</label>
<button class="login">登录</button><br>
<button class="register">注册</button>
</form>
</div>
</body>
</html>
然后将用户名框、密码框、登陆按钮、注册按钮都使用雪碧图做背景时,实现的效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css sprite</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin: 0;padding: 0;
list-style: none;
font-size: 14px;
font-family: "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma";
}
.form{
width: 300px;
height:auto;
margin: 10px;
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
}
.username,.password{
width:99%;
height: 35px;
border:1px solid #000;
border-radius: 5px;
background: url(./sprite_img2.jpg);
}
.username{
background-position: -5px -352px;
background-size: 250%;
}
.password{
background-position: -5px -350px;
background-size:250%;
}
.check{
margin: 10px;
font-size: 12px;
}
.login,.register{
margin-top: 15px;
border-radius: 5px;
background: url(./sprite_img2.jpg) no-repeat;
}
.login{
width:100%;
height: 40px;
background-position: -1px -12px;
background-size: 121%;
}
.register{
width:100%;
height: 40px;
background-position: -1px -70px;
background-size: 121%;
}
</style>
</head>
<body>
<div class="form">
<form action="">
<label>用户名:</label>
<!--<dd class="username">邮箱/手机号/用户名</dd><br>-->
<input class="username" type="text" placeholder="邮箱/手机号/用户名"><br>
<label>密 码:</label>
<!--<dd class="password">请输入密码</dd><br>-->
<input class="password" type="password" placeholder="请输入密码"><br>
<label><input class="check" type="checkbox">记住密码</label>
<label><input class="check" type="checkbox">下次自动登录</label>
<button class="login"></button><br> <!--登录注册-->
<button class="register"></button>
</form>
</div>
</body>
</html>
PS:本文是我学习CSS Sprite时候的个人总结,肯定会有不足或者不对的地方,欢迎您的指导,可留言或联系本人,感谢阅读。