使用步骤
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. redis入门到精通系列（六）：redis的事务详解

    (一)事务的概念 谈到数据库的高级应用,不可避免会谈到事务.熟悉mysql的朋友们对事务肯定不陌生,简单来讲事务就是控制一个数据库操作序列要么全部执行要么全部不执行.今天我们就来了解redis中的事务 ...

  2. 统计图—柱状图可视化(python)

    # 柱状图 import matplotlib.pyplot as plt import matplotlib as mpl mpl.rcParams['font.sans-serif']=['Fan ...

  3. [BUUCTF]PWN——others_babystack

    others_babystack 附件 步骤: 例行检查,64位程序,开了挺多保护 本地试运行一下程序 64位ida载入,看main函数 1是read函数,存在栈溢出:2是puts函数,3退出 利用思 ...

  4. python简单爬虫的实现

    python强大之处在于各种功能完善的模块.合理的运用可以省略很多细节的纠缠,提高开发效率. 用python实现一个功能较为完整的爬虫,不过区区几十行代码,但想想如果用底层C实现该是何等的复杂,光一个 ...

  5. 返回记录中的指定内容Record.Field…（Power Query 之 M 语言）

    返回指定字段: = Record.Field( 记录, "字段名") = Record.FieldOrDefault( 记录, "字段名", 找不到时返回的值) ...

  6. uwsgi nginx与django之间的关系以及各自的作用

    首先要明确几个概念及其作用(注意大小写的区别): WSGI uWSGI uwsgi Nginx WSGI 是一种协议,不是任何包不是任何服务器,就和 TCP 协议一样.它定义了 Web 服务器和 We ...

  7. CF1057B DDoS 题解

    Content 有一个长度为 \(n\) 的数列 \(a_1,a_2,...,a_n\),求出满足 \(\sum\limits_{i=l}^r a_i>100\times(r-l+1)\) 的区 ...

  8. 使用docker自定义oraclejdk启动jar包

    Dockerfile文件 FROM centos:7 #把java与tomcat添加到容器中 ADD jdk-8u161-linux-x64.tar.gz /usr/local/ #安装 vim编辑器 ...

  9. LocalDate转换成Date

    LocalDate nowLocalDate = LocalDate.now(); Date date = Date.from(nowLocalDate.atStartOfDay(ZoneOffset ...

  10. JAVAWEB统一返回格式Result类

    Result.java public class Result<T> { private Integer code; private String msg; private String ...