css之sprite（图片精灵）

旧城等待， 2022-09-05 00:08 262阅读 0赞

用CSS Sprites能很好地减少网页的http请求，允许你将一个[页面][Link 1]涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

主要利用的是CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

下面举出具体例子

通过使用图片精灵，完成对图片中第一列的图标进行定位

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图标</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            body>div {
                padding-left: 0;
                width: 180px;
                background-color: #bbb;
                padding: 20px;
            }
            
            body>div>div {
                height: 145px;
                width: 40px;
                background-origin: padding-box;
                border-radius: 50%;
                margin-bottom: 20px;
                padding-left: 115px;
                background-image: url('../../img/sprites.jpg');
            }
            
            body>div>div:nth-child(1) {
                background-position: -121px -129px;
            }
            
            div>div:nth-child(2) {
                background-position: -121px -300px;
            }
            
            div>div:nth-child(3) {
                background-position: -121px -477px;
            }
            
            div>div:nth-child(4) {
                margin: 0;
                background-position: -121px -653px;
            }
        </style>
    </head>
    
    <body>
        <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    
    </body>
    
    </html>

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70 1][]

[Link 1]: https://baike.baidu.com/item/%E9%A1%B5%E9%9D%A2/5544813
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70]: /images/20220829/21f8efe533664b61b6c8568dee9bca08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70 1]: /images/20220829/7c6917f5635e4c5ab12f6de599a5f844.png