远方的海
远方的海,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. EdwardChuby :

    Lose up to 23 pounds of pure body fat in just 3 weeks!, how did i do that?
    The 3 Week Diet is an extreme rapid weight loss program that can help you lose up to 23 pounds of pure body fat in just 3 weeks! Get your customized diet plan from our official website and find out which foods you should be eating if you want to burn your belly fat away fast! Created by acclaimed personal trainer and nutritionist Brian Flatt, The 3 Week Diet is 100% guaranteed to deliver results!
    look great? dont waste your time! lets do this, join with us and bet back your beautiful body at here:

    http://tinyurl.com/jblsnuj

    Thx

    2017-2-14
  2. usb disk security скачать :

    Goode !File Encryption is the best encryption software to encrypt, lock and hide files, folders, drives in a handy method. This encryption software is compatible with all popular versions of Windows operating system.

    2017-2-7
  3. 厦门微信营销 :

    自己写模版 ..

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

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

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

    对CSS不是很熟哦

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

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

      2014-10-11
  5. JV :

    最近没有更新啊。

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

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

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

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

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

      是的,wp本来就很臃肿!

      2014-9-29