使用步骤
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. 将图片打印到word中

    1.生成模板文件 工具类: package com.sfec.snmgr.track.utils;import com.alibam.core.wechat.util.QRCodeUtil;impor ...

  2. MyBatis一对多映射简单查询案例（嵌套结果）

    一.案例描述 书本类别表和书本信息表,查询书本类别表中的某一记录,连带查询出所有该类别书本的信息. 二.数据库表格 书本类别表(booktypeid,booktypename) 书本信息表(booki ...

  3. 小飞机可以解决git clone没有返回的问题吗？

    [1]Linux如何使用小飞机? 以ss为例,先下载客户端: https://www.mediafire.com/folder/xag0zy318a5tt/Linux 下载客户端以后,右键把权限中&q ...

  4. 【JavaScript】创建全0的Array

    1.创建一个长度为m的全0数组 var arr = new Array(m).fill(0); 2.创建一个m行n列的全0数组 var arr = new Array(m).fill(new Arra ...

  5. JS21. 使用原生JS封装一个公共的Alert插件（HTML5: Shadow Dom）

    效果预览 Shadow DOM Web components  的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...

  6. Java oop 笔记

    摘要网址:http://note.youdao.com/noteshare?id=bbdc0b970721e40d327db983a2f96371

  7. gogs报错解决合集

    目录 一.在组织中添加成员,一直显示普通用户 一.在组织中添加成员,一直显示普通用户 组织是公司,团队是公司中的不同队伍.例如A团队设置为加入就有管理员权限,那加入就有管理员. 但在组织成员那一栏中加 ...

  8. javascript中的12种循环遍历方法

    1.for (自定义条件) 循环 let arr = [1,2,3]; for(let i =0;i<arr.length;i++){ console.log(i,arr[i]) } 2.for ...

  9. vue+uniapp实现照录像，相册选择 ｜ 图片裁剪压缩，视频压缩

    一.插件简介 Zhimi-Camera(智密 - 智密 - 相机图册插件-视频/图片选择器)是一个支持拍照,录像,相册选择功能,自带图片裁剪,图片压缩,视频压缩,选择数量限制的uniapp原生插件.平 ...

  10. 总结Vue第三天：模块化和webpack模块化打包：

    总结Vue第三天:模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要 ...