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日
    2.7K0
  • 6个实例教你学会JavaScript的箭头函数

    在看别人JS代码时,经常会看到一些类似下面代码的箭头函数,如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

    2018年2月17日
    2.8K0
  • iframe中子页和父页面如何传值

    本文介绍了,父页面father.html和子页面son.html之间如何传值,子页面如何调用父页面中的函数等操作

    2021年11月30日
    4.3K0
  • css布局基础:定位练习1

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 效果图: 效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。 …

    2020年4月4日
    3.0K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    5.1K0
  • js验证表单验证,包括用户名、密码、确认密码等,用户注册页面实例

      本文是js验证表单输入的入门级教程,要求你会基础的HTML,JS知识。 页面HTML 表单代码: <form action=”” method=”post” enctype=”multipart/form-data” name=”reg_form”> <div class=”info_input”> <div cl…

    2019年9月5日
    6.2K0

发表回复

登录后才能评论