CSS Sprites:图片整合技术详细案例

CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。介绍了CSS Sprites技术的实现方法,优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。

手把手,永哥教你学会css sprite(雪碧图)技术

CSS Sprites的原理:将小图片整合到一张大的图片上,根据具体图标在大图上的位置,给背景定位。

css中用一张背景图做页面的技术有什么优势?

CSS sprites技术整合图片

如上图如果一个页面需要用到9张图片,那么对服务器的请求次数就是9次,而使用CSS Sprites:图片整合技术就可以把9张图片放到一张图片上,然后利用“background-image”,“background- repeat”,“background-position”的组合进行背景定位实现同样的效果,这样只对服务器请求一次,图片总大小也由原来的36K缩小到4K。

CSS Sprites:图片整合技术的优点

能够提升网站性能。普通制作方式下的大量图片,现在合并成一个图片,大大减少了对服务器的请求次数,对网站的加载性能有重要影响。

CSS Sprites:图片整合技术缺点

可维护性差,每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置,由于图片的位置需要固定为某个绝对数值,也是一件颇为不爽的事情。这就失去了诸如center之类的灵活性。
也有可能会出现干扰图片的情况。

CSS Sprites:图片适用场合

在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。

CSS Sprites是值得推广的一种技术。尤其适宜用于固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。

CSS Sprites:图片整合技术实例:导航栏的制作

CSS Sprites:图片整合技术制作导航栏

传统制作方法要用到三张图片:

导航栏图片1   导航栏图片2   导航栏图片2

然后设置超链接a的背景图片为第一张,a:hover的background:url(第三张图片地址) 0 0 no-repeat;
a#current 的背景图片 background:url(第二张图片地址) 0 0 no-repeat;








而使用CSS Sprites技术把网页中用到的三张图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积,减少对服务器的请求次数,提高效率。

导航栏图片整合








上面代码:

css background属性:url()里是背景图片路径;两个数值参数,第一个参数表示距左多少px,第二个参数表示距上多少,no-repeat表示背景图片向哪个方向重复,此时为不重复。 定位图片位置的参数是以图片的左上角为原点的,理解了这些,CSS Sprites技术就基本上懂了,是靠背景图片定位来实现的。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4149.html

(0)
江山如画的头像江山如画管理团队
上一篇 2019年11月5日 下午7:52
下一篇 2019年11月8日 上午9:50

99%的人还看了以下文章

  • HTML5- Canvas入门(二)画线并设置颜色

    HTML5- Canvas入门(一)画线 上一节课我们学会了 Canvas画线,绘制了一条黑色的直线,但如果我们想要绘制一条红色的或者其它颜色的线段,该怎么做呢? 答案很简单,使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧: <canvas id=”myCanvas” width=”200″ height=”200″ s…

    2022年7月10日 网页制作
    3.2K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    2.8K0
  • jquery动态新增元素节点.click点击事件失效的2个解决方法

    问题: ajax读取留言列表,每条留言后面有个回复按钮,class为“reply”,用$(“.reply”).click(function(){ //do something… }),后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。 解决方法: 最简单的方法就是直接在标签中写onclick=”&#8…

    2019年2月16日
    3.5K0
  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    2.6K0
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    3.3K0
  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    4.4K1

发表回复

登录后才能评论