为什么把网页图片素材放在一张图片上 有助于网页提速

          为什么把网页图片素材做在一张图片上？今天讲巧妙运用background标签提升网页质量。

          一个页面有好多背景素材，如果仅靠浏览器一个一个请求一个一个加载，比如说一个页面有30个单独的素材，网页在加载这个页面的时候一个访客请求30次，100个访客就要请求3000次，1000个访客就要请求300000次，现在我们把所有的素材放在一张图片上这样只需要请求一次，我们算一算，这样要节省多少次请求……

          刚开始自学的时候，我也是在仿别人站的时候发现的这个，他们好多素材都集中在一张图片上，我也很郁闷，为什么要这么做，后来越来越发现好多站都这么做，肯定对网页是有好处的。

         我们来看看他们到底是怎么做的？

         现在background标签的完整写法background: #00FF00 url(bgimage.gif) no-repeat  X Y;

        X指的是背景图片素材在X轴的距离，y：指的是在背景图片素材y轴方向的距离，比如说背景素材宽265px,单张素材高61px,两张素材放在一张图片上，默认背景图片是第一个x与y轴的值都为0px，第一张素材的y轴值为0px，第二张y轴的值为61px,如果两张图片素材是横着的变换x轴值，类似推算。

       以上是单纯的两处素材调用，还有一种情况是一处素材“动态”的那种效果

       先定义一个div 定一个选择符zongk，在css样式表里面样式是：

       #zongk { width:265px; height:61px;background:url(images/index_dingding.jpg) no-repeat 0px 0px;}
       #zongk:hover {width:265px; height:61px; background:url(images/index_dingding.jpg) no-repeat 0px -61px; }

      这样当鼠标没有移动到图片素材上显示的是y轴方向第一张素材，当鼠标覆盖在该图片素材上时变为y轴第二张图片，实则调用的是一张图片，节省了代码也节省了网页请求数。

源文件下载：

 

 

TAGS:网页素材 , 网页质量 , 网页提速

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/2.html转载请标注此链接