精灵图产生背景:

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. RAC fail over 测试

    oracle rac 11gr2中提供了多种 failover方式,这里只测试 server side TAF. 也就是说在server端配置的failover.这种配置方式的好处就是,如果有什么改动 ...

  2. C#趣味程序---九九乘法表

    using System; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { for ...

  3. Fedora下搭建LAMP开发环境

    LAMP是Linux + Apache + MySQL +PHP/Python的缩写,是一组常用来搭建动态网站服务器的开源软件.它们本身都是各自独立的程序,但是因为开源并且常放在一起使用,所以拥有了越 ...

  4. C# Json反序列化 C# 实现表单的自动化测试<通过程序控制一个网页> 验证码处理类:UnCodebase.cs + BauDuAi 读取验证码的值(并非好的解决方案) 大话设计模式:原型模式 C# 深浅复制 MemberwiseClone

    C# Json反序列化   Json反序列化有两种方式[本人],一种是生成实体的,方便处理大量数据,复杂度稍高,一种是用匿名类写,方便读取数据,较为简单. 使用了Newtonsoft.Json,可以自 ...

  5. ACdream 1125(ACfun-字典序)

    A - ACfun Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) SubmitSta ...

  6. 算法竞赛入门经典 习题 2-10 排列(permutation)

    习题 2-10 用1,2,3.....,9组成3个三位数abc.def和ghi,每一个数字恰好使用一次,要求abc:def:ghi=1:2:3.输出全部解. #include <stdio.h& ...

  7. 微软公有云Azure是惠及全人类的计算资源

    回归往事,1975年,微软以DOS创业.在随后的三十年中,微软给人类贡献了视窗操作系统Windows,至今,人们对桌面操作系统XP仍然不离不弃.可是,面对互联网的兴起.微软应该怎么办呢? 微软内部不乏 ...

  8. BestCoder Round #60/HDU 5505 暴力数学

    GT and numbers 问题描述 给出两个数NN和MM. NN每次可以乘上一个自己的因数变成新的NN. 求最初的NN到MM至少需要几步. 如果永远也到不了输出-1−1. 输入描述 第一行读入一个 ...

  9. sql server中数据约束相关的查询

    根据表名查找数据约束 SELECT * FROM INFORMATION_SCHEMA.TABLE_CONSTRAINTS WHERE TABLE_NAME = 'CMS_EventLog'; SEL ...

  10. 交换排序(2)——冒泡排序(bubble sort)

    冒泡排序算法的运作如下:(从后往前) 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所 ...