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. DataGridView 更改Header样式

    '必须先设置 EnableHeadersVisualStyles 属性 才能设置Header颜色dgv.EnableHeadersVisualStyles = Falsedgv.ColumnHeade ...

  2. Java-POJ1001-求高精度幂

    参考博客:https://www.cnblogs.com/downrainsun/p/11041960.html package poj.ProblemSet; import java.math.Bi ...

  3. next路由跳转监听

    next的路由跳转监听事件 { “routeChangeStart”, "beforeHisroryChange" "routeChangeComplete", ...

  4. Python - 定时动态获取IP代理池，存放在文件中

    定时功能通过module time + 死循环实现,因为time.sleep()会自动阻塞 get_ip_pool.py """ @__note__: while Tru ...

  5. css与js基础

    CSS样式 1 宽高设置 块元素可使用 wid 1字体 font-family :  文本类型 font-size     字体大小 font-style 字体样式 斜体italic   正常norm ...

  6. 关于windows nginx不能启动问题的解决，史上最坑系列之一（原文）

    我是直接在官方网址下载windows1.6稳定版的nginx,之所以下载它是因为在window下方便学习,更好的在linux安装和学习nginx. 下载到D:\nginx学习\,解压它,并进入启动它 ...

  7. Go 后端主要做什么

    漫谈 Go 语言后端开发 :https://blog.csdn.net/u010986776/article/details/87276303 Golang 资深后端工程师要了解的知识:https:/ ...

  8. window下进程退出后自动重启

    设计思想:编写批处理脚本监控进程的运行状态,如果发现进程停止,则自动重启该进程.批处理脚本(jk.bat)和进程脚本(hello.bat)如下: 1.jk.bat @echo off rem 定义需监 ...

  9. 【PAT甲级】1098 Insertion or Heap Sort (25 分)

    题意: 输入一个正整数N(<=100),接着输入两行N个数,表示原数组和经过一定次数排序后的数组.判断是经过插入排序还是堆排序并输出再次经过该排序后的数组(数据保证答案唯一). AAAAAcce ...

  10. 从 0 到 1：Apache APISIX 的 Apache 之路

    2019 年 12 月 14 日,又拍云联合 Apache APISIX 社区举办 API 网关与高性能服务最佳实践丨Open Talk 广州站活动,本次活动,邀请了来自Apache APISIX.又 ...