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

使用雪碧图(CSS sprite)

时间:2018-11-29 20:18:45      阅读:2771      评论:0      收藏:0      [点我收藏+]

标签:osi   blank   慢慢   chrome   highlight   hid   建立连接   建立   http   

CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

使用雪碧图的优点有以下几点:

  1. 将多张图片合并到一张图片中,可以减小图片的总大小

  2. 将多张图片合并到一张图片后,只需一次网络请求就可以将所需的资源全部下载,减小建立连接的消耗,在移动端尤为明显

显示雪碧图的条件:

1)需要一个设置好宽和高的容器

2)需要设置background-position的值(默认为(0,0),也就是图片的左上角),即移动图片到自己想要的图标位置。

调试方法:可以用浏览器自带的调试工具进行调试(如chrome浏览器按f12即可进行调试,慢慢移动background-position的值来达到理想的效果)

操作步骤:将图片向左移X个单位,然后向上移Y个单位,其中XY的具体数值是需要个人调试至合适位置得出的!

代码为:background-position:-xpx -ypx;

使用雪碧图(CSS sprite)

标签:osi   blank   慢慢   chrome   highlight   hid   建立连接   建立   http   

原文地址:https://www.cnblogs.com/wzp-monkey/p/10040032.html

(2)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!