css sprites精灵图、css图片整合、css贴图定位案例教程

作者 : 开心源码 本文共1340个字,预计阅读时间需要4分钟 发布时间: 2022-05-11 共78人阅读

一、 什么是css sprites

CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图。就是将导航的背景图,按钮的背景图等有规则的合并成一张背景图,即多张图合并为一张整图,而后再利使用background-position进行背景图定位的一种技术。

二、为什么需要css sprites

CSS Sprites 并不是一门新的技术了,目前他发展的已经比较成熟,阿里巴巴、百度、谷歌等各公司的网页中四处都能发现CSS Sprites 的影子。他是网页里常见的一种图片应使用解决方式,他允许你将一个页面里所涉及到的所=有的零星的图片都整合到一张大图中去,这样一来,当访问这个页面时,所加载的图片就不会像以前那样一张一张的慢慢显示出来了,对于当前的网络所流行的速度来说,不超出200kb的单张图片所需要的加载时间基本是差不多的,节省加载速度的关键不是降低重量,而是减少个数,就由于计算机都是按照byte计算。页面每显示一张图片都会向服务器发送一次请求。所以,图片越多,所请求的次数就越多。为了减少HTTP的请求次数,很多网站的导航背景图、登录框、按钮背景图等并不用

三、CSS Sprites的优势

在很多情况下,它有着肯定的优势,最重要的是它能减轻服务器的负担,提高网页的加载速度。

由于假我们现在有9张小图片,那么就会就有9个HTTP请求,但是假如把这九张小图放在一张大图里,那就只要要请求1次,由于你要的9个小图都在一张大图里了,请求一次后不使用再次发送HTTP请求去请求图片资源。

当页面加载时,不是去加载每一个单独的图片,而是一次加载整个组合图片。它大大减少了HTTP请求的次数,减轻服务器的压力,同时也缩短了悬停时候加载图片所需要的时间推迟,使效果更流畅。

随着页面设计向着精致、 巧妙的方向发展,便开始考虑使用非Js的方法制作鼠标滑过、悬停菜单的效果,这时精灵图应运而生。

四、css sprites实例示例教程

1、sprites实例教程解释详情

首先这些素材图标都是使用ps放在同一张图片上,而后实现成列表类布局。用css sprites实现此布局而后用background样式进行实现。

此导航的布局我们用ul 无序列表进行布局,每个li站一行排版,每个列表项的图标不相同为了区别所以对li设置不同class名,不同class对应设置定位相应的图标。

2、想要实现的效果

3、 接下来操作一波

学习交流群:330336289 邀请码:联盟

?

4、总结

重点:背景background-position属性有两个值,第一个代表水平位置的值(可为正可为负),第二个代表垂直方向的值(可为正可为负),当为正数时,代表背景图片作为对象盒子背景图片时靠左和靠上多少开始显示背景图片;当为负数时代表背景图片作为盒子对象背景图片,将背景图片超出盒子对象左边多远,超出盒子对象上边多远开始显示此背景图片。

CSS sprites技巧技术总结CSS sprites其实就是对background样式的扩展应使用,以前设置背景图位置时常见为正数,设置背景靠左靠上距离多少像px开始显示图片,为负数值后,是将图片拖离左边上边多少像素开始显示图片,同时需要学会photoshop工具准确量出距离值。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » css sprites精灵图、css图片整合、css贴图定位案例教程

发表回复