CSS - 精灵Sprite
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的更多相关文章
- CSS 精灵技术（sprite）
一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
- CSS精灵技术（sprite）
CSS技术的使用场景:有效的减少了服务器接收和发送请求的次数,css精灵是一种出来网页背景图像的方式,将一个页面设计到的所有零星背景图集中到一张大图中去,然后将大图应用于网页 .通过backgroun ...
- CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- css精灵
○ css 精灵(Sprites)技术利用photoshop将图片整合,然后用background-images,background-position,background-repeat技术,对图片 ...
- css精灵动画
精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...
- 按钮制作技巧（css精灵效果）-高级版
[转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...
- css精灵（css script 技术）
上班差不多有15天了,感觉每天都有写不完的也页面,每天都有不同的东西需要学习进步,很充实哦.今天接触到css精灵这个东西.其实之前有看过这种技术,但是没有操作过,只是听说这个技术很强大,能干嘛干嘛,但 ...
随机推荐
- AcWing 860. 染色法判定二分图
#include <cstring> #include <iostream> #include <algorithm> using namespace std; , ...
- 433B.Kuriyama Mirai's Stones
Kuriyama Mirai has killed many monsters and got many (namely n) stones. She numbers the stones from ...
- 从centos7镜像到搭建kubernetes集群（kubeadm方式安装）
在网上看了不少关于Kubernetes的视频,虽然现在还未用上,但是也是时候总结记录一下,父亲常教我的一句话:学到手的东西总有一天会有用!我也相信在将来的某一天会用到现在所学的技术.废话不多扯了... ...
- 谷歌play上APK的下载
https://apkcombo.com/tw-hk/ 在google搜索 APK DOWNLAOD就有专门下载谷歌PLAY的APK的
- maven打包一直报class not found错误
原因是因为gbase的jar包没导入到本地的maven库中 cmd,然后执行如下命令: mvn install:install-file -Dfile=D:/gbase-connector-java- ...
- WordPress 安装教程
1.要安装WordPress,先看他的环境要求 2.环境符合后,直接去官网下载 WordPress(点击去官网) 下载最新的安装包 3.下载解压后,直接在浏览器中访问 会自动跳转到安装界面 http: ...
- ios端微信浏览器 音乐不自动播放问题
<audio id=''music src='' preload autoplay loop> <script src="http://res.wx.qq.com/open ...
- yii2.0 构造函数
public function init() { parent:: init(); }
- Jenkins+Maven+Github+Springboot实现可持续自动部署(非常详细)
目前公司开发的项目已经部署到服务器上,部署项目的测试环境和生产环境,加上每个项目n个服务,于是我就 , 骚就是骚,但是就是太累了,于是花点时间研究了一下Jenkins. Jenkins的作用和它的lo ...
- pc和手机点击复制到剪贴板
https://www.cnblogs.com/kevinCoder/p/6144376.html