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. Windows Server 2008 R2远程桌面服务安装配置和授权激活

    1.安装 2.远程桌面授权激活 2.1 管理工具——远程桌面服务——(远程桌面授权管理)RD授权管理器: 2.2 由于RD授权服务器还未激活,所以授权服务器图标右下角显示红色×号: 点服务器展开——右 ...

  2. JQuery中的DOM操作(转载)

    原文链接:http://www.cnblogs.com/ILYljhl/archive/2013/07/10/3182414.html jQuery封装了大量DOM操作的API,极大提高了操作DOM节 ...

  3. APP测试用例

    日程管理APP测试用例 测试编号 测试用例 实际结果 期望结果 测试结果(Pass/Failed) 备注 NO.1 输入正确的用户名和密码点击登录 登录成功 登录成功 Pass NO.2 点击注册界面 ...

  4. php 下载word 含图片

      ob_start();//打开输出缓冲区 echo ' <html xmlns:o="urn:schemas-microsoft-com:office:office"xm ...

  5. Go字符串

    1. 字符串的声明是使用 package main import "fmt" func main() { /* Go中的字符串是一个字节的切片. 可以通过将其内容封装在“”中来创建 ...

  6. 【做题笔记】P6014 [CSGRound3]斗牛

    仔细读题:另外两张牌和的个位数即为你所获得的点数.对于Subtask 1,枚举即可.50 分. 考虑:取 \(n-2\) 张牌和取答案的 \(2\) 张牌本质是一样的.因为若取符合条件的 \(n-2\ ...

  7. python中写入txt文件需要换行,以及\r 和\n

    在Python中,用open()函数打开一个txt文件,写入一行数据之后需要一个换行 如果直接用 f.write(’\n’)只会在后面打印一个字符串’\n’,而不是换行’需要用 f.write(’\r ...

  8. javaScript中的toFix(n)方法

    定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法 NumberObject.toFixed(num) 返回值 返回 NumberObject 的字符串表示, ...

  9. Docker配置阿里云镜像源

    Docker默认拉取镜像是从这里拉取(https://hub.docker.com/),拉取的速度让人...,所以是配置国内镜像源,拉取速度十分惊人 一.版本要求 Docker版本:1.10以上 二. ...

  10. CSS3的一个伪类选择器:nth-child()

    CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我 ...