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%的人还看了以下文章

  • jQuery屏蔽页面右键,禁止复制,文本选择代码

    屏蔽页面右键,禁止复制,文本选择功能,用jQuery实现非常简单。 125建站网分享两种方法。 方法一: //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

    2019年10月16日
    2.9K0
  • javascript-快速掌握DOM技术

    Javascript的组成: 1.  js的语法(核心)。 2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本):DOM1,DOM2,DOM3 3. BOM(浏览器模型)  BOM是Browser Object Model的…

    2018年7月17日
    1.5K0
  • 第2课:CSS的工作原理

    在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。

    2020年2月22日
    1.9K0
  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    1.1K0
  • 注册表单验证常用js代码:用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

    2021年11月30日
    7220
  • 第7课:HTML标签的属性

    许多元素都可以设置属性。 属性是什么? HTML通过标签告诉浏览器如何展示网页(比如告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。例1: <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

    2018年1月20日
    2.1K0

发表回复

登录后才能评论