精灵图产生背景：

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

精灵图的定义：

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

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

精灵图使用技巧：

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .box{

            width: 68px;

            height: 30px;

            background: url("qq.png") -877px -201px;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</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. Mysql中Group By使用Having语句配合查询(where和having区别)

    注意 : having语句一般结合GROUP BY一起使用的..... Having短语与WHERE的区别!!! WHERE子句作用于基表或视图,从中选择满足条件的元组.HAVING短语作用于组,从中 ...

  2. - > 并查集+路径压缩（详解）（第一节）

    先举一个友爱的例子解释一下并查集: 话说江湖上散落着各式各样的大侠,有上千个之多. 他们没有什么正当职业,整天背着剑在外面走来走去,碰到和自己不是一路人的,就免不了要打一架.但大侠们有一个优点就是讲义 ...

  3. 马悦:《Linux内核分析》MOOC课程

    http://www.cnblogs.com/20135235my/p/5237267.html

  4. Android自己定义控件系列案例【五】

    案例效果: 案例分析: 在开发银行相关client的时候或者开发在线支付相关client的时候常常要求用户绑定银行卡,当中银行卡号一般须要空格分隔显示.最常见的就是每4位数以空格进行分隔.以方便用户实 ...

  5. python 循环高级用法 [expression for x in X [if condition] for y in Y [if condition] ... for n in N [if condition] ]按照从左至右的顺序，分别是外层循环到内层循环

    高级语法 除了像上面介绍的 [x ** 2 for x in L] 这种基本语法之外,列表推导式还有一些高级的扩展. 4.1. 带有if语句 我们可以在 for 语句后面跟上一个 if 判断语句,用于 ...

  6. javaBean注意事项

    1.重写tostring方法 2.属性第一位小写

  7. allonsy

    时间限制 1s 空间限制 512MB 2.1 题目描述 "Allons-y!" 时间还算足够,好好看看题吧. 有一种说法,时间线是扭曲的,会相互交织.(一般在科幻片里比较流行?) ...

  8. 浅谈IO优化

    三层结构 磁盘(存储).VM(卷管理)和文件系统.专有名词不好理解,打个比方说:磁盘就相当于一块待用的空地:LVM相当于空地上的围墙(把空地划分成多个部分):文件系统则相当于每块空地上建的楼房(决定了 ...

  9. JavaScript 中String和int互相转换

    在javascript里怎么样才能把int型转换成string型 (1) var num = 0;    a = x.toString();    (2) var x = 0;    a = x + ...

  10. Linux扩展正则表达式

    1. 扩展正则表达式 1.1 +(加号) + 表示前一个字符出现1次或1次以上 1.1.1 理解+ 要求:取出文件内容连续出现的小写字母 [root@oldboyedu50-lnb /oldboy]# ...