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;

Tips:You can change the code before run.

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

导航栏图片整合

Tips:You can change the code before run.

上面代码:

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(5):正确使用HTML5的nav和figure

    这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素,我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说,我们不应该滥用超语义化的元素。不幸的是,nav就是这样一个被滥用的例子。 nav元素的规范描述如下: n…

    2018年2月3日
    3.0K0
  • 第11课:表格的高级特性

    表格还有哪些相关属性? colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span(跨列)”的缩写。colspan属性用在<td>标签中,用来指定单元格横向跨越的列数: 例1: <table border=”1″> <tr><td colspan=”3″>单元格1&lt…

    2018年1月19日
    2.6K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    6.0K0
  • 鼠标放上去,图片上方动态显示半透明说明文字(源码)

    <style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

    2020年2月20日
    4.6K0
  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    1.6K0
  • 跟永哥学HTML5(3):HTML5新增语义化元素的使用

    上节课我们讲了html5与html4的区别,Html5对语法进行了简化,一个htm5文档结构代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

    2018年1月26日
    5.8K1

发表回复

登录后才能评论