首先，我们应该知道引入精灵图的原因：

具体是因为，网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。

其次，我们应该知道精灵图和图标字体(有文章介绍)在使用的过程中有哪些异同点：

同:能够缩小源文件的体积，减少http的请求，提高页面的性能

异：图标字体具有矢量效果，放大缩小不失真，而且可以使用CSS任意更改图标字体的颜色；而精灵图的大小固定，放大缩小会失真，更改图片颜色时需要重新修改精灵图。

如下图,王者荣耀官网的一张精灵图:

我们选取其中的小红旗和新人专区做一个案例,效果如下图:

html结构

<body>

    <div class="hong">精灵图的本质是处理网页背景图像的一种技术</div>

    <div class="xin">可以有效减少服务器接受和请求的次数，提高页面的加载速度</div>

</body>

css样式

<style>
/*利用精灵图就是用背景图定位,注意点:1.坐标是从左上角出发 2.背景图往反方向移动,所以是负值*/

        .hong{

            padding-left: 30px;

            background: url(wz.png) no-repeat -2px -185px;(红旗背景图定位)

        }

        .xin{

            padding-left: 240px;

            border: 1px solid #000;

            height: 108px;

            line-height: 106px;

            background: url(wz.png) no-repeat -2px -349px;(新人专区背景图定位)

        }

</style>

CSS精灵图(王者荣耀案例)的更多相关文章

  1. 课时102.CSS精灵图（掌握）

    我们这节课来介绍一个和背景图片相关的东西,精灵图 1.设么是css精灵图? css精灵图是一种图像合成技术 2.css精灵图作用 可以减少请求的次数,以及可以降低服务器处理压力 3.如何使用css精灵 ...

  2. CSS精灵图与字体图标

    CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多 ...

  3. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

  4. css精灵图&字体图标

    精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...

  5. css精灵图使用

    1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的b ...

  6. css 精灵图的使用

    精灵图的使用 1.给一个容器定义一个大小(宽高) 2.引入背景图 3.定位到自己你想要的图片位置 例如:  background-position: 0 0;  background-position ...

  7. CSS精灵图合成工具

    链接:http://pan.baidu.com/s/1o7OUUVo 提取密码:rmnx

  8. 从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. python爬虫王者荣耀高清皮肤大图背景故事通用爬虫

    wzry-spider python通用爬虫-通用爬虫爬取静态网页,面向小白 基本上纯python语法切片索引,少用到第三方爬虫网络库 这是一只小巧方便,强大的爬虫,由python编写 主要实现了: ...

随机推荐

  1. 第14章 Salesforce标准对象

    14.1 Sales Cloud基本信息 Sales Cloud 会为您提供管理业务的一切功能.生成最佳潜在客户.通过销售漏斗管理业务机会,并使用现有客户培养关系.以及,预测收入.设置销售区域,并将代 ...

  2. SAS学习笔记62 通过压缩变量长度来实现数据集压缩

    有时候从其他数据库过来的字符型变量Length很长,导致数据集文件很大,可以通过压缩变量长度来实现数据集压缩 具体思路: LENGTH语句设置所有变量真实长度 SET数据集的时候对原有变量进行RENA ...

  3. docker容器日志管理(清理)

    原文:docker容器日志管理(清理) 前言 在使用docker容器时候,其日志的管理是我们不得不考虑的事情.因为docker容器的日志文件会占据大量的磁盘空间.下面介绍的就是对docker容器日志的 ...

  4. leetcode 数组

    寻找数组的中心索引 给定一个整数类型的数组 nums,请编写一个能够返回数组"中心索引"的方法. 我们是这样定义数组中心索引的:数组中心索引的左侧所有元素相加的和等于右侧所有元素相 ...

  5. jmeter进行压测的步骤

    1)安装jmeter和Badboy. 2)用badboy录制脚本,保存之后直接导出. 3)用jmeter打开badboy录制的脚本,假如是有参数的话,需要写一个csv的参数化文件,在jmeter中添加 ...

  6. 【JSP】layui+jsp，根据后台数据给复选框默认勾选

    1.项目中经常使用复选框,当重复加载,就需要从数据库给复选框一个默认的值了. 2.接下来使用的是JSP中迭代的方法,给复选框绑定值.思路和方法不一定好,仅供参考. <input type=&qu ...

  7. Django:ORM介绍

    1.ORM概念 ​ 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. ​ 简单的说,ORM是通过使用描述 ...

  8. Centos 端口被占用，kill被占用的进程

    1.yum install lsof 2.输入netstat -tln,查看系统当前所有被占用端口 3.根据端口查询进程,输入lsof -i :9555,切记不要忘了添加冒号 4. 既然知道进程号了, ...

  9. Burp Suite Extension tools

    1.Setting up the envrionment for burp Extensions   before we can write extensions we need to ensure ...

  10. 十分钟了解pandas

    十分钟掌握Pandas(上)--来自官网API 一.numpy和pandas numpy是矩阵计算库,pandas是数据分析库,关于百度百科,有对pandas的介绍. pandas 是基于NumPy ...