css

1、什么是css精灵图(sprite)

css精灵图(sprite)直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”,是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

2、使用css精灵图(sprite)的方法

css精灵图(sprite)其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候,现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

3、代码实现

  • 使用到的精灵图(sprite):
    使用到的精灵图

  • 精灵图分析:
    精灵图分析

  • html代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .sprites{
                width: 200px;
                margin: 50px auto;
            }
            .sprites div{
                margin: 5px;
            }
            .sprites span{
                float: left;
                width: 20px; 
                height:20px;
                background: url('./images/icon.png');/* 引用精灵图 */
                background-size: 60px 40px;
            }
            .sprites1{
                background-position: 0 0;
            }
            .sprites2{
                background-position: -20px 0 !important;
            }
            .sprites3{
                background-position: 0 -20px !important;
            }
            .sprites4{
                background-position: -20px -20px !important;
            }
            .sprites5{
                background-position: -40px 0 !important;
            }
        </style>
    
    </head>
    <body>
        <div class="sprites">
            <div><span class="sprites1"></span>付款图标</div>
            <div><span class="sprites2"></span>存款图标</div>
            <div><span class="sprites3"></span>删除图标</div>
            <div><span class="sprites4"></span>粘贴图标</div>
            <div><span class="sprites5"></span>笑脸图标</div>
        </div>
    </body>
    </html>
  • 效果图:
    效果图

本文转载自:https://blog.csdn.net/zjsfdx/article/details/87932322

最后修改:2020 年 04 月 17 日 07 : 34 PM
如果觉得我的文章对你有用,请随意赞赏