使用步骤
1.创建盒子
    <div class="one"></div>
  2.使用PxCook量取图标大小，将图标的宽高设置成为盒子的宽高
    

3.将精灵图片设置盒子的背景图片

   background: url('./images/sprites.png')
  4.用PxCook量取小图标的坐标，并取负值给背景图片
    background: url('./images/sprites.png') -80px -70px;
    

注意：1.如果使用伪元素，一定要加content：'';才可使用；伪元素默认是以行内元素显示，需要转块元素或行内块元素，才能设置宽高。

2.给单标签直接设置精灵图是无效的，可以在用div双标签包裹，给div设置精力图，并将其定位到div上

CSS基础 精灵图的使用的更多相关文章

  1. CSS之精灵图（雪碧图）与字体图标

    本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了 ...

  2. CSS Sprites精灵图(雪碧图)

    简介 CSS精灵图,是一种网页图片应用处理方式.允许将一个页面涉及到的所有零星图片都包含到一张大图中 利用CSS的"background-image","backgrou ...

  3. CSS Sprite精灵图如何缩放大小

    transform:scale( x ): 语法为:transform: scale(x,y). 同时有scaleX, scaleY专门的x, y方向的控制. 例如:transform: scale( ...

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

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

  5. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

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

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

  7. Css Sprite(雪碧图、精灵图)<图像拼合技术>

    一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...

  8. CSS基础(滑动门，雪碧图，网页布局）

    3.11.2017 这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧 CSS可见性(元素可见性) overflow: hi ...

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

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

随机推荐

  1. Linux:find命令中

    默认情况下, find 每输出一个文件名, 后面都会接着输出一个换行符 ('\n'), 因此我们看到的 find 的输出都是一行一行的: ls -l total 0 -rw-r--r-- 1 root ...

  2. SQL Server 和 Oracle 以及 MySQL 数据库

    推荐:https://www.zhihu.com/question/19866767 三者是目前市场占有率最高(依安装量而非收入)的关系数据库,而且很有代表性.排行第四的DB2(属IBM公司),与Or ...

  3. 创建线程的第二种方式------实现Runnable接口的方式

    package cn.itcast.demo16.Demo07.Runnable;/** * @author newcityman * @date 2019/7/22 - 23:17 */public ...

  4. java 整型

    byte(1字节).short(2字节).int(4字节).long(16字节) java中前缀加上0b或者0B就可以写二进制数,前缀加上0就可以写八进制数,前缀加上0x或者0X就可以写十六进制数 一 ...

  5. tableau添加参考线

    一.将数据窗口切换至分析窗口-点击自定义-参考线 二.出现编辑参考线和参考区间的界面(整个表指的是整个视图,每区指的是如下2018就是一个区,每单元格指的是横轴的最小值) 三.我们分别为每区添加最大值 ...

  6. 前端浅谈-Js的组成

    这里主要想详细的分析一下浏览器渲染过程,但东西比较多.所以分成多个部分. JS由三个部分组成,分别为ECMAScript.BOM.DOM. 其中BOM是浏览器层面的东西,而DOM是页面层面的东西.简单 ...

  7. 【Web】BUUCTF-warmup（CVE-2018-12613）

    BUUCTF 的第一题,上来就给搞懵了.. .这要是我自己做出来的,岂不是相当于挖了一个 CVE ?(菜鸡这样安慰自己)   问题在 index.php 的 55~63 行 // If we have ...

  8. 拆分行（Power Query 之 M 语言）

    数据源: 略 目标: 将指定列拆分为行 操作过程: 选取指定列>[主页](或[转换])>[拆分列]>[按分隔符]/[按字符数]/[按位置]>高级选项>拆分为[行] M公式 ...

  9. Django中提示消息messages的设置

    1. 引入messages模块 1 from django.contrib import messages 2. 把messages写入view中 1 @csrf_exempt 2 def searc ...

  10. CF908A New Year and Counting Cards 题解

    Content 有 \(n\) 张卡牌,每张卡牌上只会有大小写字母和 \(0\sim 9\) 的阿拉伯数字.有这样一个描述:"如果卡牌正面写有元音字母(\(\texttt{A,E,I,O,U ...