CSS Sprite "精灵图"

CSS Sprite

CSS Sprites叫 CSS精灵或者雪碧图,是一种网页图片应用处理方式。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。

再利用CSS的"background-image","background-repeat","background-position"的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。

 

为什么建议使用CSS Sprite

在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,所以,访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。

所以,CSS Sprites技术加速的关键,并不是降低质量,而是减少个数,当然随之而来的增加内存消耗,CSS Sprites图片繁琐的合成等缺点在网站性能的提升前,也就不足为道了。

 

CSS Sprites 的优点:     

  • 减少图片的字节
  • 减少了网页的http请求,从而大大的提高了页面的性能
  • 减少命名难的问题

CSS Sprites 的缺点:    

  • 在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景。
  • 在宽屏,高分辨率的屏幕下的自适应页面,图片如果不够宽,很容易出现背景断裂。
  • CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的CSS,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动CSS。

再说说background-position

只有真正的了解background-position的特性才能在需要的场景更好的运用它。

background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:
background-position属性设置背景原图像(由 background-image 定义)的位置,意味着使用这个属性的前提是必须设置背景原图像background-image。

了解了background-position属性的用法,使用雪碧图之前,我们需要知道雪碧图中各个图标的位置。

从上面的图片不难看出雪碧图中各个小图标(icon)在整张雪碧图的起始位置,例如第一个图标(裙子)在雪碧图的起始位置为 x:0,y:0,第二个图标(鞋子)在雪碧图的起始位置为 x:0,y:50px,第三个图标(足球)在雪碧图的起始位置为x:0,y:100px,依次类推可以得出各个图片相对于雪碧图的起始位置。

 

以上面的雪碧图为例(实际雪碧图中各个小图片的起始位置和上面的展示图不同)用一个Demo来阐述它的使用方法。

HTML

<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
    <span class="icon3"></span>
    <span class="icon4"></span>
</div>

CSS

 <style>
        .box {
          width: 600px; 
          height:300px; 
          border: 3px solid #ccc; 
          background-color: #8064A2; 
         }
         span {
          display: inline-block; 
          width: 25px; 
          height: 25px; 
          border: 3px solid #ccc;
          background-image: url(css/img/sidebar.png); 
          background-repeat: no-repeat;
          margin: 5px;
         }
        .icon1 {
          background-position: 0 0;
         }
        .icon2 {
          background-position: -40px 0;
         }
        .icon3 {
          background-position: 0 -25px;
         }
        .icon4 {
          background-position: -40px -25px;
         }
    </style>

 

效果图

 

合成CSS Sprite的工具

利用雪碧图显示icon的小demo https://evenyao.github.io/css-sprite-demo/

制作CSS Sprite工具详解 http://www.cnblogs.com/wang4517/p/4476758.html

转载于:https://www.cnblogs.com/evenyao/p/9262371.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS Sprite是一种在网页中使用的优化技术,它通过将多个小图标或背景图像合并为一个大的图像,并使用CSS的background-position属性来显示其中的一小部分,从而减少HTTP请求的数量,提高网页加载速度。 以下是CSS Sprite技术的一些优点和缺点: 优点: 1. 减少HTTP请求:将多个图像合并为一个大图像后,只需一次HTTP请求就可以获取全部图像,减少了网页加载时的请求次数。 2. 提高加载速度:减少了HTTP请求的数量,可以提高网页的加载速度,特别是在拥有大量小图标或背景图像的网页上效果更明显。 3. 减少带宽消耗:合并后的大图像比多个小图像的总和要小,减少了传输的数据量,节省了带宽消耗。 4. 精灵图管理方便:通过将相关的图像合并到一张精灵图中,方便管理和维护。 缺点: 1. 图像更新麻烦:当需要更新精灵图中的某个图像时,需要重新生成整个精灵图,并且需要更新对应的CSS代码。这会增加开发和维护的复杂性。 2. 图像大小限制:合并后的精灵图尺寸有限,如果图像数量较多或图像尺寸较大,可能无法合适地放入一张图像中,导致使用多个精灵图或无法使用CSS Sprite技术。 3. 高分辨率屏幕适配:在高分辨率屏幕上,由于需要显示更高清晰度的图像,可能需要使用不同尺寸的精灵图,增加了开发和维护的复杂性。 综上所述,CSS Sprite技术可以有效地减少HTTP请求、提高网页加载速度和节省带宽消耗,但在图像更新和高分辨率屏幕适配方面可能存在一些不便和复杂性。在实际应用中,需要根据具体情况权衡使用CSS Sprite技术的利弊。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值