利用CSS技巧减小HTTP请求
本文最后更新于 5754 天前,其中的信息可能已经有所发展或是发生改变。

简介
这种技巧的名称叫做CSS Sprite,基本原理就是利用CSS中图片background系列的background-image、background-repeat、background-position等属性实现。通过这种方式达到图片显示加速的关键,不是降低重量,而是减少个数。在通常情况下一张图片的传输时间,通常远小于请求等待的时间。

PS:特别制作了三个CSS Sprites实例演示,感兴趣的朋友可以看一看。

实例
比如google.cn现在首页的底部导航也是用这个方式实现的。
所用图片为:https://kimi.pub/wp-content/uploads/demo/css/google.gif
效果:http://www.google.cn


代码
从网上找了好几个演示,大家可以看下面地址的演示:CSS Sprites实例演示
效果一:纵向背景图

        <style>
        .min, .max {
            width:16px;
            height:16px;
            background-image:url(https://static.kimi.pub/wp-content/uploads/demo/css/sprite.png);
            background-repeat: no-repeat; /*我们并不想让它平铺*/
            text-indent:-999em; /*隐藏文本的一种方法*/
        }
        .max {
            background-position: 0 -350px;
        }
        .min {
            background-position: 0 -400px;
        }
        </style>
        <div class="max">最大化</div>
        <div class="min">最小化</div>

效果二:横向背景图

        <style>
        .one, .two {
            width:16px;
            height:16px;
            background-image:url(https://static.kimi.pub/wp-content/uploads/demo/css/editor.gif);
            background-repeat: no-repeat; /*我们并不想让它平铺*/
            text-indent:-999em; /*隐藏文本的一种方法*/
        }
        .one {
            background-position: -108px 0;
        }
        .two {
            background-position: -128px 0;
        }
        </style>
        <div class="one">颜色</div>
        <div class="two">链接</div>

效果三:平滑投票

        <style type="text/css">
        .star_rating { list-style:none; margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(https://static.kimi.pub/wp-content/uploads/demo/css/rating_stars.gif) 0 0 repeat-x; overflow:hidden;}
            .star_rating li { padding:0; margin:0; float:left;}
            .star_rating li a { display:block; width:14px; height:12px; text-decoration:none; text-indent:-9000px; z-index:20; position:absolute; padding:0; margin:0;}
            .star_rating li a:hover{ background:url(https://static.kimi.pub/wp-content/uploads/demo/css/rating_stars.gif) 0 12px; z-index:2; left:0;}
                .star_rating a.one_star{ left:0;}
                .star_rating a.one_star:hover{ width:14px;}
                .star_rating a.two_stars{ left:14px;}
                .star_rating a.two_stars:hover{ width:28px;}
                .star_rating a.three_stars{ left:28px;}
                .star_rating a.three_stars:hover{ width:42px;}
                .star_rating a.four_stars{ left:42px;}
                .star_rating a.four_stars:hover{ width:56px;}
                .star_rating a.five_stars{ left:56px;}
                .star_rating a.five_stars:hover{ width:70px;}
            .star_rating li.current_rating{ background:url(https://static.kimi.pub/wp-content/uploads/demo/css/rating_stars.gif) 0 24px; position:absolute; height:12px; display:block; text-indent:-9000px; z-index:1; left:0;}
        </style>
    <p>满分5.0, width:70px
    <ul class="star_rating left">
        <li class="current_rating" style="width:70px;">Current rating: 4.7 (3 votes)</li>
        <li><a href="###" onfocus="this.blur();" title="1 of 5 stars" class="one_star">1</a></li>
        <li><a href="###" onfocus="this.blur();" title="2 of 5 stars" class="two_stars">2</a></li>
        <li><a href="###" onfocus="this.blur();" title="3 of 5 stars" class="three_stars">3</a></li>
        <li><a href="###" onfocus="this.blur();" title="4 of 5 stars" class="four_stars">4</a></li>
        <li><a href="###" onfocus="this.blur();" title="5 of 5 stars" class="five_stars">5</a></li>
    </ul>
    </p>
    <p>当前2.5, width:35px
    <ul class="star_rating left">
        <li class="current_rating" style="width:35px;">Current rating: 4.7 (3 votes)</li>
        <li><a href="###" onfocus="this.blur();" title="1 of 5 stars" class="one_star">1</a></li>
        <li><a href="###" onfocus="this.blur();" title="2 of 5 stars" class="two_stars">2</a></li>
        <li><a href="###" onfocus="this.blur();" title="3 of 5 stars" class="three_stars">3</a></li>
        <li><a href="###" onfocus="this.blur();" title="4 of 5 stars" class="four_stars">4</a></li>
        <li><a href="###" onfocus="this.blur();" title="5 of 5 stars" class="five_stars">5</a></li>
    </ul>
    </p>

资料
本文在写作的过程中严重参考了如下文章:
CSS Sprites的实现
http://realazy.org/blog/2007/10/08/css-sprites/
加速图片显示
http://www.blueidea.com/tech/site/2007/4750.asp
利用CSS技巧减小HTTP请求
https://kimi.pub/322.html
Yahoo的YShow网站优化中的34条规则
http://developer.yahoo.com/performance/
CSS Sprites: Image Slicing’s Kiss of Death
http://alistapart.com/articles/sprites

评论

  1. 16年前
    2008-6-26 17:23:40

    好像hainei,UCenterHOME都用这个技巧了

  2. 习明
    16年前
    2008-6-26 18:30:03

    @blankyao: dz也用了 虽然很少 很多网站或程序都用类似的技巧 比如做滑动门之类的效果

  3. 16年前
    2008-7-30 9:41:42

    这个早两年大力推广WEB标准的时候就已经开始使用了。。。

  4. 博主
    16年前
    2008-7-31 14:28:50

    @Jeftom 看来我是落伍了。。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇