一、名词解释

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

所以为了提高网页响应速度,避免这个小图标加载耗费大量时间,于是将这些小图片全部放到一张图片上,例如下面的图是利用浏览器调试工具(通常为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. Docker Compose 介绍安装

    Compose介绍 Compose是一个定义和管理多容器的工具,也是一种容器编排工具,前身是Pig,使用Python语言编写.使用Compose配置文件描述多个容器应用的架构,biubiu使用什么镜像 ...

  2. Nginx配置SSL证书实现https访问「浏览器未认证」

    http 和 https 介绍 http:应用最广泛的一种网络协议,是一个B/S的request和response的标准,用于从www服务器传输超文本到本地浏览器的传输协议. https:以安全为目标 ...

  3. mysql5.6 centos编译部署

    准备工作 创建用户 useradd mysql 删除老版本 rpm -qa |grep mysql rep -e mysql包 重命名默认的mysql配置文件 mv /etc/my.cnf /etc/ ...

  4. ERROR 1290 (HY000): The MySQL server is running with the --secure-file-priv option so it cannot execute this statement

    centos7.5 使用into outfile备份失败 问题: mysql> select * from world.city into outfile '/tmp/world_city.da ...

  5. RPM Yum 相关命令及参数

    RPM 命令 我们可以直接使用rpm命令,对软件包进行一些操作. 安装 rpm –ivh <package_name> rpm –Uvh <package_name> # 没有 ...

  6. Java 成员变量和属性的区别

    例一: 一个Student pojo类: public class Student{ private String name; private int age; public String getNa ...

  7. POJ 1088 滑雪(模板题 DFS+记忆化)

    Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...

  8. C#反射详解

    http://blog.csdn.net/educast/article/details/2894892(转) 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏 ...

  9. yii2框架中获取添加元素的主键

    控制器层: 模型层: 返回结果是:

  10. pytoch word_language_model 代码阅读

    参考代码地址:https://github.com/pytorch/examples/tree/master/word_language_model /word_language_model/data ...