使用步骤
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下部署Java项目(jetty作为容器)常用脚本命令

    startup.sh #!/bin/bash echo $(basename $(pwd)) "jetty started" cd jetty nohup java -Xmx8g ...

  2. 登录界面.jsp

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  3. abp (.net 5)设置默认请求语言为简体中文

    https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization?view=aspnetcore-5.0 默认有3个prov ...

  4. CentOS7学习笔记(四) 常用命令记录

    查看命令的帮助信息 man 命令查看帮助信息 在想要获取帮助信息的命令前面加上man即可,例如查看ls命令的帮助信息 [root@localhost ~]# man ls help 命令查看帮助信息 ...

  5. *CTF pwn write up

    第一次做出XCTF的题目来,感谢wjh师傅的指点,虽然只做出一道最简单的pwn题,但是还是挺开心的.此贴用来记录一下,赛后试着看看其他大师傅的wp,看看能不能再做出一道题来. babyheap 程序有 ...

  6. C# 使用163的SMTP服务器发送邮件

    string Receiver, string Subject, string content: //163邮箱发送配置 client = new System.Net.Mail.SmtpClient ...

  7. CF792A New Bus Route 题解

    Content 给定一个长度为 \(n\) 的数列 \(a_1,a_2,a_3,...,a_n\),求这个序列当中差的绝对值最小的数对并求出这样的数对的个数. 数据范围:\(2\leqslant n\ ...

  8. LuoguP7694 [COCI2009-2010#4] AUTORI 题解

    Content 科学论文会大量引用一些早期的著作,因此在一个论文中出现两种不同的命名约定并不少见.这两种不同的命名约定分别是: 长变体,由每个作者姓氏的完整单词由连字符连接而成,例如 Knuth-Mo ...

  9. ubuntu上kdump配置：

    ubuntu上kdump配置: 1, 安装kdump apt-get install linux-crashdump 2, 调整crashkernel内存大小为768M(默认192M内存太小) 修改 ...

  10. flink使用命令开始、停止任务

    命令操作 进行flink的安装目录 动态上传jar包启动job ./bin/flink run -c com.test.CountMain -P 3 Test-1. 0-SNAPSHOT.jar -- ...