CSS Sprites ——雪碧图的使用方法

时间:2022-11-21 23:12:31

首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每个图片的坐标,这样不但减少http请求,而且还降低了图片的大小,加快图片的加载速度,对前端开发的朋友来说是必备技能。更详细的解释请到【百度百科】围观。

雪碧图使用场景

1.静态图片,不随用户信息的变化而变化

2.小图片,图片容量比较小

3.加载量比较大

注:一些大图片、有动态效果图片无需使用雪碧图

雪碧图使用原理

1.使用CSS里面的background-position属性来控制背景图的位置,从而在不同处显示所需要的图标。

2.

CSS Sprites ——雪碧图的使用方法

 

(上图是慕课网教学视频上的一张图片,在此借用一下)如图所示,将背景图放在一个坐标系里面,以左上角为起点。拼合背景图的小图(X,Y)为负值,比如想要展示图中黑色边框里面的裙子时,只需:裙子:{background-position:-100px,0;}即可。因为“裙子”只有X轴偏移,没有Y轴偏移。

雪碧图实现方法

1.第一步:完成背景图的拼合(把你所需要展示的小图片整合到一张图上面)

          Photoshop手动拼图:在PS里完成所需的背景图,量取每个小图片的尺寸并记录下来,将背景图保存为png格式。

          当项目或网站比较大时,用PS逐个量取可能不太现实。这时可以使用Sprites工具自动生成小图片的坐标点。推荐一种Sprites工具自动生成工具——CSSGaga,是Windows系统下自动生成雪碧图的一种工            具,具体使用还请看官网上自寻。下载地址:http://www.99css.com/archives/1524

2.下面是本人做的一个雪碧图例子的代码,看官可以复制去看下效果。

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图</title>
</head>
<style>
h3,ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
li h3 {
font-size: 14px;
font-weight: 400px;
}
li {
display: block;
height: 40px;
line-height: 35px;
overflow: hidden;
/*border: 0.5px solid #dedede;*/
}
.LOGO {
width:160px;
background: #f8f8f8;
}
li i {
background: url(sprite.png);
display: inline;
width: 45px;
height: 35px;
float: left;
margin: 3px 10px 0 0;
}
.logo-1 i{
background-position: 0 0;
}
.logo-2 i{
background-position: 0 -35px;
}
.logo-3 i{
background-position: 0 -73px;
}
.logo-4 i{
background-position: -60px 3px;
}
.logo-5 i{
background-position: -60px -35px;
}
.logo-6 i{
background-position: -60px -108px;
}
.logo-7 i{
background-position: -60px -145px;
}
.logo-8 i{
background-position: -60px -185px;
}

 

</style>
<body>
<div class="LOGO">
<ul>
<li class="logo-1">
<i></i>
<h3>服装内衣</h3>
</li>
<li class="logo-2">
<i></i>
<h3>鞋包配饰</h3>
</li>
<li class="logo-3">
<i></i>
<h3>运动户外</h3>
</li>
<li class="logo-4">
<i></i>
<h3>居家饰品</h3>
</li>
<li class="logo-5">
<i></i>
<h3>居家家具</h3>
</li>
<li class="logo-6">
<i></i>
<h3>爱上喝水</h3>
</li>
<li class="logo-7">
<i></i>
<h3>私家车</h3>
</li>
<li class="logo-8">
<i></i>
<h3>乐器类</h3>
</li>
</ul>
</div>
</body>
</html>

 

 3.所用图片

CSS Sprites ——雪碧图的使用方法

看官需要将改图转化为png格式。(background-position属性的数值可以根据需求自行调整)

 

 

 

 

该文章为个人编写,如有错误之处,还请看官谅解!