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. nginx的负载均衡配置

    1.下载nginx的压缩包,可以去官网下载 2.解压缩,可以看到其中有个conf的文件夹,在该目录中,nginx.conf配置文件就是核心配置文件 3.默认配置 #user nobody; worke ...

  2. Git - git bash 在 windows 下创建软连接

    1. 概述 使用 git bash 在 windows 下创建软连接 或者叫 快捷方式 感谢 Tony 老师的帮助 Tony 的技术笔记 Windows 使用 ln -s 创建软链接 2. 问题 需求 ...

  3. Educational Codeforces Round 80 (Rated for Div. 2)E（树状数组，模拟，思维）

    #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ],mx[],a[],pos[],sum ...

  4. nginx配置指令auth_basic、auth_basic_user_file及相关知识

    参考链接 https://www.jianshu.com/p/1c0691c9ad3c auth_basic_user_file 所需要的密码,可以通过如下方法生成 1)安装htpasswd (yum ...

  5. 【C语言】判断学生成绩等级

    方法一:if-else #include<stdio.h> int main() { printf("请输入成绩:\n"); float score; scanf_s( ...

  6. 算法刷题--回溯算法与N皇后

    所谓回溯算法,在笔者看来就是一种直接地思想----假设需要很多步操作才能求得最终的解,每一步操作又有很多种选择,那么我们就直接选择其中一种并依次深入下去.直到求得最终的结果,或是遇到明细的错误,回溯到 ...

  7. Javascript自增、自减运算符

    JavaScript自增.自减运算符与表达式语法 var i++; var-- 声明变量 i-- 变量名 ++ -- 自增运算符 JavaScript自增.自减运算符与表达式 JavaScript自增 ...

  8. 吴裕雄 python 神经网络——TensorFlow实现搭建基础神经网络

    import numpy as np import tensorflow as tf import matplotlib.pyplot as plt def add_layer(inputs, in_ ...

  9. win10无法登陆SSG进行WEB UI管理

    故障描述:尝试登录SSG设备时,无法无法刷出页面,但是设备时可以ping通的(内部接口),可以Telnet上设备,就是无法通过网页登录. 深入测试:win7的系统可以登录,win10的不行,浏览器报协 ...

  10. Yii2.0 连接数据库

    打开数据库配置文件common\config\main-local.php