远方的海
远方的海,WordPress,免费
2014 Sep 26 21 : 28

减少请求数,利用CSS-Sprite进行图片合并

您当前的位置: 首页 > 建站资源 > 前端 > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

这次介绍一个减少请求数的神器!CSS-Sprite不仅仅对于Wordpress,所有建站程序,有图片的地方就可以用到它来合并。

CSS-Sprite

举个栗子,本站右侧悬浮的分享按钮,里面有各种社交图标,这些图标如果每次都去调用一下图片那就是16个图片->16个请求,等待16次首字节。

看完上面的说明,大家就知道了,图片合并是对于网站加速而言的一件大事。下面给出进行图片合并的方法。

首先要给出一个很厉害的网站,可以做到在线合并而且自动生成css样式表CSS 图片拼合生成器

准备工作:打开上面的网页,把自己需要合并的图片全部压缩在一个.zip文件里面,上传。减少请求数,利用CSS-Sprite进行图片合并

下面的选项可以默认,也可以根据自己的需求更改,不过值得注意的是,选择输出.png的图片可能会比较大,生成.jpg的图片可以节省不少体积。点击“生成拼合图片 & CSS”按钮就可以得到一个图片和CSS文件。

引用CSS文件

先做一个<div id="sprite"></div>的层样式为以下:

  1. #sprite {
  2.     backgroundurl(images/sprite.png);
  3. }

按照我压缩的几个图片为例,可以在id为sprite的div下,做class="sprite-QQ"等的几个div,样式为以下(都是自动生成的~)至此我们就完成了图片合并哦~

  1. .sprite-QQ{ background-position: 0 0; width308pxheight291px; }
  2. .sprite-css-sprite{ background-position: 0 –341pxwidth649pxheight148px; }
  3. .sprite-2014{ background-position: 0 –539pxwidth320pxheight480px; }

以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:前端 建站资源

您可能也会喜欢

发表回复

Post Comment


  1. 厦门微信营销 :

    自己写模版 ..

    2014-10-10
    • 远方的海水神 :

      贵站的内容很丰富啊,我一直也想弄微信方面呢~

      2014-10-11
  2. 屌丝日记 :

    对CSS不是很熟哦

    2014-10-9
    • 远方的海水神 :

      css不难,随便学学就OK啦!

      2014-10-11
  3. JV :

    最近没有更新啊。

    2014-10-6
    • 远方的海水神 :

      开学了,还要准备一个重要的考试。

      2014-10-6
  4. 美国主机评论 :

    WP对于一般的用户来说还真不适合,要学会精简。

    2014-9-29
    • 远方的海水神 :

      是的,wp本来就很臃肿!

      2014-9-29