精灵图产生背景：

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. A^B Mod C

    基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 给出3个正整数A B C,求A^B Mod C.   例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整 ...

  2. 多项式输出 2009年NOIP全国联赛普及组

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold   题目描述 Description 一元 n 次多项式可用如下的表达式表示:数,请按照如下规定的格式要求输出该多项式 ...

  3. HUD——1286 找新朋友

    思路: 裸的欧拉函数 代码: #include<cstdio> #include<cstring> #include<cstdlib> #include<io ...

  4. centos 7: 迁移MySQL目录

    Steps: 1. systemctl stop mariadb 2. mkdir data destination folder, ex: /home/mysql 3. cp -R /var/lib ...

  5. 内核信号处理 & CPU8个通用寄存器

    内核信号处理参考: http://www.spongeliu.com/165.html 信号本质上是在软件层次上对中断机制的一种模拟(注意区分中断.异常.信号),其主要有以下几种来源: 程序错误:除零 ...

  6. iOS开发——代码生成TabBar与视图切换具体解释

    我在之前多篇博客中解说了在不使用storyboard而使用nib文件的情况下.使用代码生成导航栏并进行跳转,具体能够參考<iOS开发--界面跳转与返回及视图类型具体解释><iOS纯代 ...

  7. Android开发之ListView实现不同品种分类分隔栏的效果(非ExpandableListView实现）

    我们有时候会遇到这么一个情况.就是我在一个ListView里面须要显示的东西事实上是有种类之分的.比方我要分冬天,夏天.秋天.春天,然后在这每一个季节以下再去载入各自的条目数据. 还有,比方我们的通讯 ...

  8. Spring的AOP特性

    一.AOP简介 AOP是Aspect-Oriented Programming的缩写,即面向切面编程.利用oop思想,可以很好的处理业务流程,但是不能把系统中某些特定的重复性行为封装到模块中.例如,在 ...

  9. 深入理解 JBoss 7/WildFly Domain 模式启动过程

    概述 JBoss 7/WildFly 以 domain 模式启动时会启动多个 JVM.比如例如以下通过启动脚本启动 domain 模式: ./domain.sh 启动后我们查看进程: [kylin@l ...

  10. kentico11 教程，

    create master page with css list menu Add the navigation menu Add a dynamic web part that will repre ...