雪碧图

作者: 张露锋 | 来源:发表于2018-11-27 08:38 被阅读0次

雪碧图：

就是将网页制作中使用的多个小图片合并成一个图片，使用css计数将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。

亚马逊：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>亚马逊</title>  
    <style type="text/css"> 
        .box:link{ 
                    display:block; 
                    width:48px; 
                    height:27px; 
                    background-image:url(yamaxun.png); 
                    background-repeat:no-repeat; 
                    background-position:0px -338px; 
                    }   
         .box:hover{ 
                    background-position:-49px -338px; 
                    } 
         .box:active{ 
                    background-position:-120px -338px;
                   } 
    </style> 
    </head> 
    <body> 
        <a href="#" class="box"></a> 
    </body> 
    </html>