css:background-position > 精灵技术
background-position : length || length
background-position : position || position
取值：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位
position : top | center | bottom | left | center | right
实例
"top left","left top"和"0% 0%","0,0"代表元素的左上角；
"top","top center","center top"和"50% 0"表示在元素顶边居中位置；
"right top","top right"和"100% 0"代元素的是元素的右上角位置；
"left","left center","center left"和"0% 50%"表示在元素左边中间位置；
"center","center center"和"50% 50%"表示在元素中间位置；
"right","right center","center,right"和"100% 50%"表示在元素右边中间位置；
"bottom left","left bottom"和"0% 100%"表示在元素的左下角；
"bottom","bottom center","center bottom"和"50% 100%"表示在元素的底下中间点位置；
"bottom right"，"right bottom"和“100％ 100％”表示在元素右下角位置
为什么要讲CSS精灵技术，网页开发者喜欢在一个图片文件夹里散落着许多小图片，客户端每显示一张图片都会向服务器发送一次请求，图片越多请求次数越多，这样有可能造成图片延迟加载，影响用户体验，随着互联网技术的发展，大家越来越重视网页加载的速度了，于是这些小图片被整合到了一起，CSS Sprites出现了。
比如上面的图片，我们第一次想要切割第一个桃子出来，第二想要切割第二个或随便一个，按照图片在网页中的坐标是从左到右，上到下，0 0 就是左上角
-----------> x轴
|
|
|
|
|
y轴
width: 90px;
height: 100px;
display: block;
background: url(images/peach.png) 0 0 no-repeat;
这个就可以限制一个框框把第一个桃子显示出来，当你想要第二个桃子，直接改
background-position: 0 -115px;
因为这张图的上桃子间隔是115px。
这边有个实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
padding:0;
margin:0;
}
.container{
width: 1100px;
height: 631px;
margin: 0 auto;
min-width: 900px;
background: url(images/bg.jpg) 50% 50% no-repeat;
position: relative;
}
h1{
position: relative;
top: 55px;
left: 100px;
}
.all_peach{
position: absolute;
top: 85px;
left: 210px;
width: 800px;
height: 500px;
}
/*将图片定位到左上角，用width和height限制显示的宽高，保证只能显示一个桃子*/
.peach{
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 100px;
display: block;
background: url(images/peach.png) 0 0 no-repeat;
animation-iteration-count: infinite;
animation-name: shake;
animation-timing-function: ease-in-out;
}
/*第一个桃子对应的精灵图的一个桃子，background-position: 0 0; 表示左上角，第一个桃子比较大*/
.peach1 {
background-position: 0 0;
top: 158px;
left: 108px;
}
/*background-position: 0 -115; 表示精灵图的第二个桃子*/
.peach2 {
background-position: 0 -115px;
top: 97px;
left: 278px;
}
.peach3 {
background-position: 0 -115px;
top: 129px;
left: 488px;
}
.peach4 {
background-position: 0 -115px;
top: 214px;
left: 297px;
}
.peach5 {
background-position: 0 -115px;
top: 314px;
left: 448px;
}
.peach6 {
background-position: 0 -115px;
top: 305px;
left: 613px;
}
/*动画执行时间*/
.shake1 {
animation-duration: 2.5s;
}
.shake2, .shake3 {
animation-duration: 3.5s;
}
.shake4, .shake5, .shake6{
animation-duration: 4s;
}
/*定义关键帧，从0% ～ 100%(可以自定义)*/
@keyframes shake{
0% {
transform: rotate(2deg);
transform-origin: 50% 0;
}
20% {
transform: rotate(10deg);
transform-origin: 50% 0; }
40% {
transform: rotate(0deg);
transform-origin: 50% 0;
}
60% {
transform: rotate(-2deg);
transform-origin: 50% 0;
}
80%{
transform: rotate(-10deg);
transform-origin:50% 0;
}
100%{
transform: rotate(0deg);
transform-origin: 50% 0;
}
}
</style>
<body>
<div class="container">
<h1>摇晃的桃子</h1>
<div class="all_peach">
<spac class="peach peach1 shake1"></spac>
<spac class="peach peach2 shake2"></spac>
<spac class="peach peach3 shake3"></spac>
<spac class="peach peach4 shake4"></spac>
<spac class="peach peach5 shake5"></spac>
<spac class="peach peach6 shake6"></spac>
</div>
</div>
</body>
</html>
运行效果：
详细了解backrgound-position：https://www.w3cplus.com/content/css3-background-size
css:background-position > 精灵技术的更多相关文章
- css学习_css精灵技术、字体图标
1.精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力) 2.精灵技术的本质(小的背景图集中在一张大图上) 3.精灵技术的使用 案例1: 案例2: 注意:产品类的图片一般不是用背景,而是用im ...
- css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
- 认识CSS中精灵技术（sprite）和滑动门
前端之HTML,CSS(十) 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上.拼接成的大图被称为精灵图.浏览器打开网页时,每一个图片 ...
- CSS之 元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形
元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...
- CSS精灵技术
在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术.通过查看源发现,其实他是通过超级链接的伪类实现的, ...
- CSS 精灵技术（sprite）
一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
- CSS——精灵技术
精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
随机推荐
- 在动态链接库dll中弹出对话框
在动态链接库dll中弹出对话框步骤: 1.添加Dialog资源,然后在资源视图的对话框界面右击添加类,输入类名MyDlg,使得其继承与CDialogEx.(继承CDialog应该也可以)2.在新生成的 ...
- 34.Linux-printk分析、使用prink调试驱动
本节学习目的 1)分析printk()函数 2)使用prink()调试驱动 1.在驱动调试中,使用printk(),是最简单,最方便的办法 当uboot的命令行里的“console=tty1”时,表示 ...
- ESLint 的正式使用感受
介绍ESLint ESLint 是一个代码规范和错误检查工具,有以下几个特性 所有东西都是可以插拔的.你可以调用任意的rule api或者formatter api 去打包或者定义rule or fo ...
- CCF-201503-1-图象旋转
问题描述 试题编号: 201503-1 试题名称: 图像旋转 时间限制: 5.0s 内存限制: 256.0MB 问题描述: 问题描述 旋转是图像处理的基本操作,在这个问题中,你需要将一个图像逆时针旋转 ...
- 自定义spring mvc的json视图
场景 前端(安卓,Ios,web前端)和后端进行了数据的格式规范的讨论,确定了json的数据格式: { "code":"200", "data&quo ...
- php中trait
1.简介 自 PHP 5.4.0 起,PHP 实现了一种代码复用的方法,称为 trait. Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制.Trait 为了减少单继承语言的限制,使 ...
- git以及github的初级入门（一）
本身学习git的操作是没什么兴趣的,毕竟原本是win平台学的java开发,git下那么多复制的命令行操作确实比较让人头疼,直到昨天我打开计算机的时候,我放置项目的E盘,以及F盘,G盘盘符都不见了!!我 ...
- 让你的Javascript提升70%性能
现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行.预处理.setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker.即使对于WebWorker ...
- 【Win 10 应用开发】MIDI 音乐合成——乐理篇
针对 MIDI 音乐的 API ,其实在 Win 8.1 的时候就出现.在UWP中采用了新的驱动模式,MIDI 消息传递更加高效. 首先得说明的是,UWP 的 MIDI 相关 API 不是针对 MID ...
- vue-cli 安装失败Failed to download repo vuejs-templates/webapck-simple: Response code 404 (Not Found)
新学习vue的萌新们经常会遇到各种各样的坑.例如上面这个报错.这个一般是命令行面板写错单词导致. 正确:vue init webpack-simple .(注意"."点,指当前目录 ...