1. CSS精灵是一种处理网页背景图像的方式。

2. 它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

3. 有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

"height", "width", "background-image","background-repeat","background-position"的组合进行背景定位。

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	a {

		width: 67px;

		height: 32px;

		background: url(110.png) no-repeat left top;

		display: block;  /*转换*/

	}

	a:hover {

		background-position: left bottom;

	}

	</style>

</head>

<body>

	<a href="#"></a>

</body>



4. 要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性(x-offset, y-offset)精确地定位。(可以集合到background属性一起写)

原图，可以在background属性中删掉no-repeat试试，调大点height

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        h3 {

            background: url(images/index.png) no-repeat -2px -184px;

            width: 26px;

            height: 26px;

        }

        div {

            width: 236px;

            height: 109px;

            background: url(images/index.png) no-repeat 0 -460px;

        }

    </style>

</head>

<body>

    <h3></h3>

    <div></div>

</body>

</html>

原图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        span {

            display: inline-block;

            background: url(images/abcd.jpg) no-repeat;

        }

        .a {

            width: 108px;

            height: 110px;

            background-position: 0 -9px;

        }

        .l {

            width: 102px;

            height: 114px;

            background-position: 0px -274px;

        }

        .e {

            width: 110px;

            height: 110px;

            background-position: -482px -9px;

        }

        .n {

            width: 113px;

            height: 114px;

            background-position: -254px -272px;

        }

    </style>

</head>

<body>

    <span class="a"></span>

    <span class="l"></span>

    <span class="l"></span>

    <span class="e"></span>

    <span class="n"></span>

</body>

</html>

CSS - 精灵Sprite的更多相关文章

  1. CSS 精灵技术（sprite）

    一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.  然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...

  2. CSS精灵技术（sprite）

    CSS技术的使用场景:有效的减少了服务器接收和发送请求的次数,css精灵是一种出来网页背景图像的方式,将一个页面设计到的所有零星背景图集中到一张大图中去,然后将大图应用于网页 .通过backgroun ...

  3. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  4. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  5. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  6. css精灵

    ○ css 精灵(Sprites)技术利用photoshop将图片整合,然后用background-images,background-position,background-repeat技术,对图片 ...

  7. css精灵动画

    精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...

  8. 按钮制作技巧（css精灵效果）-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  9. css精灵（css script 技术）

    上班差不多有15天了,感觉每天都有写不完的也页面,每天都有不同的东西需要学习进步,很充实哦.今天接触到css精灵这个东西.其实之前有看过这种技术,但是没有操作过,只是听说这个技术很强大,能干嘛干嘛,但 ...

随机推荐

  1. rancher 方式创建nfs-client 存储类流程

    rancher 方式创建nfs-client 存储类流程 待办 https://www.iamle.com/archives/2514.html

  2. 【资源分享】Dll Injector（DLL注入器）

    *----------------------------------------------[下载区]----------------------------------------------* ...

  3. MySQL表的操作02

    [1]设置非空约束(NOT NULL ,NK)--->>>目的是f防止某些字段中的内容为空 CREATE TABLE +table_name ( 属性名   数据类型   NOT N ...

  4. C语言运算符优先级和结合性一览表

    所谓优先级就是当一个表达式中有多个运算符时,先计算谁,后计算谁.这个其实我们在小学学算术的时候就学过,如1+4÷2. 但是C语言中的运算符已经远不止四则运算中的加减乘除了,还有其他很多运算符.当它们出 ...

  5. logstash output到kafka记录与总结（ No entry found for connection 2）

    简述 本文记录logstash的output配置为kafka的过程.这里是简单的例子,输入为stdin,本文主要目的是为了记录在这次配置过程中遇到的问题和解决的过程及总结. 关于kafka集群的搭建可 ...

  6. Centos6.10-FastDFS-Tracker.conf示例配置

    Centos610系列配置 FastDFS_Tracker.conf示例配置 # is this config file disabled # false for enabled # true for ...

  7. Linux上临时路由、永久路由配置

    Linux下查看路由条目 查看路由表命令 route -n 示例 [root@cobbler_vm ~]# route -n Kernel IP routing table Destination G ...

  8. python进阶（十七）正则&json（上）

    1. 一个列表中所有的数字都是重复2次,但是有一个数字只重复了一次. 请找出重复一次的数字,不可以使用内置函数. [2,2,1,1,0,4,3,4,3] 方法1:通过字典计数,找到value等于1的k ...

  9. awk命令_Linux awk 命令用法详解

    本文索引 awk命令格式和选项 awk模式和操作 模式 操作 awk脚本基本结构 awk的工作原理 awk内置变量(预定义变量) 将外部变量值传递给awk awk运算与判断 算术运算符 赋值运算符 逻 ...

  10. 吴裕雄 python 机器学习——模型选择验证曲线validation_curve模型

    import numpy as np import matplotlib.pyplot as plt from sklearn.svm import LinearSVC from sklearn.da ...