认识CSS中精灵技术(sprite)和滑动门

前端之HTML,CSS(十)

  精灵技术与精灵图

  精灵技术本质

  精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上。拼接成的大图被称为精灵图。浏览器打开网页时,每一个图片显示都是浏览器向服务器发送一次请求的结果,精灵技术是把多个小图片拼接为一个大图,有效减少了浏览器请求服务器的次数,与此同时也提高了页面的加载速度。

  精灵技术使用

  精灵技术实际是通过background属性限定盒子大小以后,通过background-position属性调整背景图片的位置,使得一个大图上的小图片局部显示出来,未显示的部分由于盒子大小有限,且作为盒子的背景图片,不会显示在页面上。

  测试用图片为王者荣耀下载游戏保存的图片,操作方式鼠标右击选线open in new tab,打开新页面后右键图片另存为...得到图片。

  精灵图

  精灵技术使用代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>王者荣耀</title>
 6     <style type="text/css">
 7         .sprite-1 {
 8             background: url(images/index.png) no-repeat -0px -182px;
 9             width: 29px;
10             height: 27px;
11         }
12         .sprite-2 {
13             background: url(images/index.png) no-repeat 0px -350px;
14             width: 236px;
15             height: 106px;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="sprite-1">
21
22     </div>
23     <div class="sprite-2">
24
25     </div>
26 </body>
27 </html>

  效果

  滑动门

  滑动门是利用精灵技术设定等高盒子,两个盒子设定同样的背景图片,再由盒子的内容撑开盒子实现了盒子根据内容大小的自适应。

  背景用图

  测试代码,自行改变代码中内容的,观察盒子横向伸缩。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>滑动门-测试</title>
 6     <style type="text/css">
 7         a {
 8             display: inline-block;
 9             height: 33px;
10             line-height: 33px;  /*内容居中对齐*/
11             background: url(images/wx.png) no-repeat; /*设置左盒子背景靠左显示*/
12             padding-left: 15px;
13         }
14         span {
15             display: inline-block;
16             height: 33px;
17             text-decoration: none;
18             color: #fff;
19             background: url(images/wx.png) no-repeat right; /*设置右盒子背景靠右显示*/
20             padding-right: 15px;
21         }
22     </style>
23 </head>
24 <body>
25     <a href="#">
26         <span>改变字数试试</span>
27     </a>
28 </body>
29 </html>

原文地址:https://www.cnblogs.com/snow-lanuage/p/10555750.html

时间: 2024-11-07 03:57:13

认识CSS中精灵技术(sprite)和滑动门的相关文章

css:background-position &gt; 精灵技术

background-position : length || length background-position : position || position 取值: length  : 百分数 | 由浮点数字和单位标识符组成的长度值.请参阅 长度单位  position  : top | center | bottom | left | center | right 实例 "top left","left top"和"0% 0%",&q

CSS的精灵技术

原文地址:https://www.cnblogs.com/python-machine/p/12238438.html

JS滑动门

<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="hover">专家汇聚</a> <a href="#" id="one2" onmouseover="setTab('one',2,2)" >主治医师</a> <div id="con

浮动的特性/常用的CSS属性/精灵图技术(background-image)/定位

一.关于上篇博客的回顾 1.浮动: (1).标准文档流 (2).作用:实现元素并排 (3).特点:第一个盒子会贴父盒子的边,第二个会贴第一个盒子的边... (4).特性: ①.脱离标准文档流 ②.收缩效果 ③.字围 ④.设置浮动,任意的标签都可以设置宽高 (5).总结:要浮动一起浮动,有浮动,清除浮动 (6).浮动带来的影响:如果父盒子不设置高度,子盒子浮动了,因为子盒子脱离了标准文档流,那么他们不在页面上占位置,撑不起父盒子的高度 2.清除浮动: (1).给父盒子设置固定高度(后期不好维护)

CSS——精灵技术

精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites.CSS雪碧). 精灵技术本质 简单地说,CSS精灵是一种处理网页背景图像的方式.它将一个页面涉及到的所有零星背景图

【技术】css中em与px的区别

em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明body{font-size: 62.5%;},这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了.em有如下特点: 1. em的值并不是固定的: 2. e

css滑动门技术

双重滑动门效果还是比较常用的,其实很好理解: 两个门就好比两个块级的元素重合所形成的效果,看一段代码如下: #Mydoor ul li a:hover{ color:#fff; //设置背景 黑色 background: url(hover.gif); //设置背景 图片,图片周边应为透明,这样才能把背景衬托出来 } 可以看到左侧变化如下 /* *将连接a下的内容变为块级:给右边一个宽度 */ #Mydoor ul li a b{ display:block; //设置为块元素 padding:

CSS Sprites (CSS图像拼合技术)教程工具

什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上. Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”. 上图是口袋妖怪的组合图片,可

CSS中的背景、雪碧图、超链接的伪类样式

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现