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. 7_5 困难的串（UVa129）<回溯法：避免无用判断>

    “超级氪因素大赛”(译注:英国的一档电视心智竞答节目)的主办方雇你来对付那些足智多谋的参赛选手.在比赛的一个环节中,节目主持人将念出一长串的字母来考验选手的记忆能力.因为许多选手都是分析字串模式的高手 ...

  2. Bugku-CTF分析篇-weblogic(黑客攻击了Weblogic应用，请分析攻击过程，找出Weblogic的主机名。)

    weblogic 黑客攻击了Weblogic应用,请分析攻击过程,找出Weblogic的主机名. flag格式:flag{} Tip:主机名为十六进制.  

  3. 吴裕雄 python 机器学习——数据预处理过滤式特征选取SelectPercentile模型

    from sklearn.feature_selection import SelectPercentile,f_classif #数据预处理过滤式特征选取SelectPercentile模型 def ...

  4. NMAP输出结果中CPE的含义【转】

    CPE全称是Common Platform Enumeration,意思是通用平台枚举项:它是NMAP对识别出来的软件.操作系统和硬件的一种命名方式:格式如下: cpe:/<part>:& ...

  5. Docker配置阿里云镜像源

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

  6. aarch64环境下，搭建并配置服务器tomcat：

    aarch64环境下,搭建并配置服务器tomcat: 环境说明及下载相关文件: 1. ARM环境:aarch64开发板 2.JDK安装包: jdk-8u231-linux-arm64-vfp-hflt ...

  7. 继承QWidget后无法使用QSS

    使用继承QWidget后的类对象时,如果设置styleSheet看不到效果, 需要重写 void paintEvent(QPaintEvent *event); 方法, 在重写的方法中加入如下代码即可 ...

  8. 02-Spring的IOC示例程序（通过id获取对象）

    *******通过IOC容器创建id对象并为属性赋值******** 整体结构: ①创建一个java工程 ②导包 ③创建log4j.properties日记配置文件 # Global logging ...

  9. 红帽RHCE培训-课程3笔记内容2

    9 NFS 9.1 NFS基础 目标 .使用NFS将文件系统连接到客户端,并使用IP 地址控制访问 .使用NFS将文件系统连接到客户端,并使用kerberos 来控制访问 .配置用户名和密码控制访问的 ...

  10. 萌新深度学习与Pytorch入门记录（一）：Win10下环境安装

    深度学习从入门到入土,安装软件及配置环境踩了不少坑,过程中参考了多处博主给的解决方法,遂整合一下自己的采坑记录. (若遇到不一样的错误,请参考其他博主答案解决) 笔者电脑系统为win10系统,在此环境 ...