码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-03-20 01:14:06      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:位置   title   text   round   请求   hide   内容   荣耀   div   

前端之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>
View Code

  效果

技术图片

  滑动门

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

  背景用图

技术图片

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

技术图片
 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>
View Code

 

 

 

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

标签:位置   title   text   round   请求   hide   内容   荣耀   div   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!