精灵图产生背景：

1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。
2、网页上的图像过多时，服务器就会频繁地接受和发送请求，大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites）

精灵图的定义：

1、很多图片融合在一张图上，通过背景定位的方式将图标显示在每个盒子中。

2、背景定位的方式主要通过控制x和y轴的值。

精灵图使用技巧：

1、一般情况：直接一个盒子，里面的背景图片是精灵图，使用时注意x轴和y轴。

2、特殊情况：盒子中有一个小图标，此时，小图标外套一个标签（i标签或者span），给小图标设置定位后（自动转成行内块）定义宽高，这个宽高就是精灵图中的小图的宽高，然后注意x轴和y轴的值。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .box{
  8.             width: 68px;
  9.             height: 30px;
  10.             background: url("qq.png") -877px -201px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="box"></div>
  16. </body>
  17. </html>

CSS——精灵图与背景图片定位的更多相关文章

  1. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

  2. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  3. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  4. CSS 背景图像 背景图片定位

    背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...

  5. 课时102.CSS精灵图（掌握）

    我们这节课来介绍一个和背景图片相关的东西,精灵图 1.设么是css精灵图? css精灵图是一种图像合成技术 2.css精灵图作用 可以减少请求的次数,以及可以降低服务器处理压力 3.如何使用css精灵 ...

  6. css精灵图使用

    1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的b ...

  7. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  8. css精灵图&字体图标

    精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...

  9. CSS精灵图与字体图标

    CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多 ...

随机推荐

  1. Spring的Java配置方式

    Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 1     @Configuration 和 @Bean Spring的Java配置方式是通过 @Configuration ...

  2. Linux RAR 解压缩

    1.下载 http://www.rarlab.com/download.htm 2.安装 tar zxvf rarlinux-3.8.0.tar.gz cd rar make make install ...

  3. NYOJ5 Binary String Matching

    Binary String Matching 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Given two strings A and B, whose alp ...

  4. The Pilots Brothers' refrigerator DFS+枚举

    Description The game “The Pilots Brothers: following the stripy elephant” has a quest where a player ...

  5. [bzoj1607][Usaco2008 Dec]Patting Heads 轻拍牛头_筛法_数学

    Patting Heads 轻拍牛头 bzoj-1607 Usaco-2008 Dec 题目大意:题目链接. 注释:略. 想法:我们发现,位置是没有关系的. 故,我们考虑将权值一样的牛放在一起考虑,c ...

  6. zoj——1311 Network

    Network Time Limit: 2 Seconds      Memory Limit: 65536 KB A Telephone Line Company (TLC) is establis ...

  7. spring-boot-starter-actuator（健康监控）配置和使用

    在生产环境中,需要实时或定期监控服务的可用性.Spring Boot的actuator(健康监控)功能提供了很多监控所需的接口,可以对应用系统进行配置查看.相关功能统计等. 集成: <depen ...

  8. 条款31: 千万不要返回局部对象的引用，也不要返回函数内部用new初始化的指针的引用

    先看第一种情况:返回一个局部对象的引用.它的问题在于,局部对象 ----- 顾名思义 ---- 仅仅是局部的.也就是说,局部对象是在被定义时创建,在离开生命空间时被销毁的.所谓生命空间,是指它们所在的 ...

  9. Codeforces 446C —— DZY Loves Fibonacci Numbers（线段树）

    题目:DZY Loves Fibonacci Numbers 题意比較简单,不解释了. 尽管官方的题解也是用线段树,但还利用了二次剩余. 可是我没有想到二次剩余,然后写了个感觉非常复杂度的线段树,还是 ...

  10. poj-1635 Subway tree systems（推断两个有根树是否同构）-哈希法

    Description Some major cities have subway systems in the form of a tree, i.e. between any pair of st ...