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

雪碧图使用场景

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

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

3.加载量比较大

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

雪碧图使用原理

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

2.

（上图是慕课网教学视频上的一张图片，在此借用一下）如图所示，将背景图放在一个坐标系里面，以左上角为起点。拼合背景图的小图（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.所用图片

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

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

CSS Sprites ——雪碧图的使用方法的更多相关文章

  1. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  2. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  3. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  4. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  5. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  6. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  7. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...

  8. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  9. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

随机推荐

  1. 在Ubuntu 18.04 安装 MySQL 8.0

    在Ubuntu 18.04 安装 MySQL 8.0 ① 登入 mysql 官网,在官网中下载 deb 包,点击该链接,即可下载. https://dev.mysql.com/downloads/re ...

  2. ES6笔记（二）

    一.字符串的扩展1. 用于从码点返回到对应字符. String.fromCodePoint(xx)2. for...of可以遍历字符串3. includes():返回布尔值,表示是否找到了参数字符串. ...

  3. caioj.cn 3004:中山市第九届小学生信息学邀请赛试题 5.合并线段

    CSDN的博客 友键 [题目描述] 有一条很长的尺子,上面标记着整数点的坐标.如: 现在给出n条线段,每条线段表示为x-y(x和y为整数,x<=y),两条线段能合并的条件是x-y,y-z,合并为 ...

  4. 用VS2017编写C语言的Hello World

    1.新建项目 2.选择新建空项目 3.在源文件处右键单击,选择添加-新建项 4.选择“c++文件”,将名称后缀改成.c即可用C语言编写程序 5.编写代码: #include <stdio.h&g ...

  5. JAVA如何request没有参数的post提交

    过去做网页的时候 post过来的值都是带参的 我就request.getParameter("")来获取 现在过来的不带参 就一串字符串 我应该怎么获取? //用获取数据流的方式, ...

  6. "No entity found for query"(转)

    很久以前一直用EntityManager下getResultList()查询数据,即便一个数据亦是如此,所以要频繁的List.get(0).新接口getSingleResult()出现了,然后就开始频 ...

  7. java并发实战-基础知识

    1.线程安全 共享:变量可以由多个线程同时访问.可变:变量值在生命周期内可以变化. 当多个线程访问某个类时,这个类始终都能表现出正确的行为,称这个类是线程安全的. 无状态对象是线程安全的. 2.原子性 ...

  8. cocos2d-html5 碰撞检测的几种方法

    游戏中的碰撞还是比较多的,比如角色与角色的碰撞,角色与墙壁的碰撞,角色与怪物的碰撞等,都需要进行碰撞的检测,来触发一定的事件 最近在尝试制作一个小游戏的时候需要用到碰撞检测,然后就查了下资料,并在论坛 ...

  9. 消息队列kafka集群搭建

    linux系统kafka集群搭建(3个节点192.168.204.128.192.168.204.129.192.168.204.130)    本篇文章kafka集群采用外部zookeeper,没采 ...

  10. PAT A1059

    PAT A1059 标签(空格分隔): PAT 解题思路 :先打印出素数表.利用结构体数组来存贮质因子的值和个数 strcut factor{ int x; //值 int cnt; //个数 }fa ...