关于CSS Sprite切图技术

最新推荐文章于 2024-05-18 06:08:21 发布

TensorFlow学习

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量538

点赞数

分类专栏： css相关

css相关专栏收录该内容

9 篇文章 0 订阅

订阅专栏

我们经常看到一个页面上有很多小图标，可是当我们用工具去打开时却发现

这些小图标其实在一张图片上，这是怎么实现的呢

这当中用到了CSS Sprites切图技术。

CSS Sprites其实就是把网页中一些图标整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

优点：减少网页http请求，提高页面性能，降低服务器负载；文件命名减少麻烦。

缺点：定位繁琐，布局固定，降低网页弹性。

示例：

[html]view plaincopy 
   
 <html>  
 <head>  
 <meta charset="utf-8">  
 <title>CSS sprites</title>  
 <style type="text/css">  
 div{  
     background-image:url(nav_logo99.png);  
     background-repeat:no  
 }  
 .logo{  
     width:120px;  
     height:40px;  
     background-position:-24px 0px  
 }  
 .play{  
     width:28px;  
     height:28px;  
     background-position:-138px -41px  
 </style>  
 </head>  
   
 <body>  
 <div class="logo"></div>  
 <div class="play"></div>  
 </body>  
 </html>  