一、名词解释

在网页中,我们可以看到有很多的小图标,比如微博上的登录位置有很多这样的小图标。因为浏览器显示网页的所有内容都需要从我们自己的服务器进行下载,如果将这些图标分别存在服务器上,那么当需要显示的时候将会发出很多次请求-->响应-->下载,这样一来将会消耗大量的时间来下载这些小图标

所以为了提高网页响应速度,避免这个小图标加载耗费大量时间,于是将这些小图片全部放到一张图片上,例如下面的图是利用浏览器调试工具(通常为F12打开)从微博的请求中找到的,大家可以直接下载使用

二、使用难点

精灵图片的使用难点在于如何在这一张图片中定位到我们需要的部分,首先我们需要理解三个坐标:浏览器坐标、组件坐标、图片坐标,每个组件都有自己的坐标点,左上角为原点,往上y值为负数,越来越小;往左x为负数,越来越小

假如我们的组件的宽高分别为16px,图片宽高为200px,我们发现如果将图片作为组件的背景图片,将会从图片0,0左边点开始显示,只能显示图片的16px,因为组件只有这么大,多余的图片就被舍弃了。如下图片当图片原点和组件原点重叠的时候,组件只能显示图片的16px大小

假如此时我们想要截取图片中第二列中的亮的vip6,此时图片需要分别往左移动和往上移动一定距离如下。原来图片的坐标和组件的坐标重叠都是0,0,此时图片往上移动,相当于y减小了100px(假设值),此时y坐标为-100px;往左移动24px,此时x坐标为-24px,所以如果我们需要获取vip6图标,图片相对于组件坐标往左移动24px和往上移动100px就能取到

三、使用步骤

1.我们需要用到CSS中两个与背景图片有关的属性

  • background-image: url("图片地址");

  • background-position: x坐标 y坐标;

2.现在我们以取vip3和4以及微博认证为例

3.创建三个div,宽高分别等于vip3和4以及微博认证大小,如vip3和4宽高都为16px,微博认证x及y坐标分别为95px 35px

  • 创建三个div

  • 指定宽高、背景图片、图标所在位置

  • 显示效果

四、程序源码

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  
    <title>index</title>
  7.  
    <style>
  8.  
    div{
  9.  
    width: 16px;
  10.  
    height: 16px;
  11.  
    background-image: url("images/icon.png");
  12.  
    }
  13.  
    /* 从精灵图片中获取需要的图片 */
  14.  
    .vip3{ /* 获取vip3 */
  15.  
    background-position: -24px -48px;
  16.  
    }
  17.  
    .vip4{ /* 获取vip4 */
  18.  
    background-position: -24px -72px;
  19.  
    }
  20.  
    .auth{ /* 获取微博认证 */
  21.  
    width: 95px; /* 微博认证和vip大小不一样,需单独指定 */
  22.  
    height: 35px;
  23.  
    background-position: -425px -50px;
  24.  
    }
  25.  
    </style>
  26.  
    </head>
  27.  
    <body>
  28.  
    <!-- 设置三个div显示 -->
  29.  
    <div class="vip3"></div>
  30.  
    <div class="vip4"></div>
  31.  
    <div class="auth"></div>
  32.  
    </body>
  33.  
    </html>

CSS-精灵图片的使用(从一张图片中截图指定位置图标)的更多相关文章

  1. CSS sprites(css 精灵):将小图标整合到一张图片上

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...

  2. CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

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

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

  4. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  5. css精灵动画

    精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...

  6. 按钮制作技巧(css精灵效果)-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  7. css精灵(css script 技术)

    上班差不多有15天了,感觉每天都有写不完的也页面,每天都有不同的东西需要学习进步,很充实哦.今天接触到css精灵这个东西.其实之前有看过这种技术,但是没有操作过,只是听说这个技术很强大,能干嘛干嘛,但 ...

  8. CSS Sprites (css精灵)

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

  9. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

随机推荐

  1. 关于mysql触发器和存储过程的理解

    内容源自:一篇很棒的 MySQL 触发器学习教程 一.触发器概念 触发器(trigger):监视某种情况,并触发某种操作,它是提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊 ...

  2. Yii1打印当前请求所有执行的SQL及耗时

    我们在熟悉新的项目了解业务的时候,可以有很多方式.看项目文档说明:和了解项目身边的人沟通:通过自己度代码调试,但是一步步调试打印语句或许有点慢,如果可以调出当前请求的所有语句,那么很快可以熟悉他的业务 ...

  3. Docker Kubernetes 介绍 or 工作原理

    Kubernetes 介绍 Kubernetes是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernetes也叫K8S. K8S是Google内部一个叫Borg的容 ...

  4. Python pyc知识了解

    pyc 是什么 1. Python是一门解释型语言? 我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去,直到发现了*.pyc文件的存在.如 ...

  5. Maven项目下servlet异常

    今天新建了一个maven项目,导入包的时候红线报错,提示程序包不存在 在网上找了几个方法试过都无效,想起idea自带提示功能,点击红色报错的地方 同时按下Alt+Enter键,选择add maven ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

    jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...

  7. 画一条0.5px的线

    通过伪类元素:after为其添加样式,用transform:scaleY令其在垂直方向缩小0.5倍 .div:after{ height: 1px; transform: scaleY(0.5); t ...

  8. Windows Server 2012 R2域控制器部署

    1. 概述 该文档描述了在Windows 2012R2 系统上搭建域控的方式. 2. 具体步骤 2.1 首先我们先配置好IP地址.计算名(默认的计算机名比较长,后期其它计算机加入域控的时候需要输入比较 ...

  9. linux学习--目录切换命令 cd

  10. 多进程—进程同步控制,IPC

    multiprocessing包—Process模块开启多进程的两种方式,Process的方法,守护进程 进程同步控制—multiprocessing.Lock  multiprocessing.Se ...