• 技术文章 >web前端 >css教程

    CSS如何使用精灵图

    醉折花枝作酒筹醉折花枝作酒筹2021-04-07 18:06:05原创74

    CSS使用精灵图的方法:首先使用background-image属性导入精灵图;然后利用background-repeat:no-repeat设置图像不重复;最后使用background-position属性设置图像初始位置,进行精确定位。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    CSS Sprite是什么?

    CSS Sprite直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”或“CSS贴图定位”,是一种网页图片应用处理方式。其实就是把多张小图片整合到一张图片中去,再利用CSS的“background-image”,“background-repeat”,“background-position”进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

    优点:

    减少网页http请求,加快页面加载速度,提高页面的性能(适合小图)。
    比如页面上使用到很多icon的图,如果页面一张张去请求这些图片的时后那http请求就会很多,这时候把这些图片合并为一张的话,页面就只需要加载一次了,减少了http请求带来的性能消耗。如下图:

    图片整合原则:

    实现代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>sprite精灵图使用</title>
        <style type="text/css">
            ol, ul ,li{list-style:none};
            body, p,  ul, li {margin:0; padding:0;}
            ul li {
                float: left;
                background-color: #63caac;
                color: #fff;
                padding: 5px 10px;
                margin-right: 10px;
            }
            li:hover{background-color:#347764;}
            ul.sprite li span{display: block;}
            ul.sprite li span.l1{background-position:0 0;}
            ul.sprite li span.l2{background-position:-64px 0;}
            ul.sprite li span.l3{background-position:-128px 0;}
            ul.sprite li span.l4{background-position:-192px 0;}
    ul.sprite li span{width:64px;padding-top:5px;height:64px;overflow:hidden;background:url(img.png) no-repeat;}
        </style>
    </head>
    <body>
        <ul class="sprite">
            <li><span class="l1"></span></li>
            <li><span class="l2"></span></li>
            <li><span class="l3"></span></li>
            <li><span class="l4"></span></li>
        </ul>
    </body>
    </html>

    推荐学习:《css视频教程

    以上就是CSS如何使用精灵图的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:CSS 精灵图
    上一篇:常见的css框架有哪些 下一篇:css怎么设置显示隐藏动画
    第15期线上培训班

    相关文章推荐

    • css怎么设置扇形区域• css中可以实现旋转效果的属性是什么• css样式表常驻留在文档的什么区域中• css哪个样式不推荐使用• CSS如何设置字体粗细

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网