• 技术文章 >Web开发 >css教程

    css精灵图技术是什么

    小妮浅浅小妮浅浅2021-10-21 15:13:21原创197

    1、将页面所涉及的所有零星背景图像集中到大图中,然后将大图用于网页。用户访问页面时,只需向服务器发送一次请求。

    2、直接使用background-position等属性来准确定位所需的背景部分。

    实例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
    <style>
        .box span {
            display: inline-block;
        }
        .j {
            background: url("abcd.jpg") no-repeat -389px -141px;
            width: 102px;
            height: 112px;
        }
        .w {
            background: url("abcd.jpg") no-repeat -117px -560px;
            width: 135px;
            height: 112px;
        }
        .t {
            background: url("abcd.jpg") no-repeat -368px -417px;
            width: 102px;
            height: 112px;
        }
    </style>
    </html>

    以上就是css精灵图技术的介绍,希望对大家有所帮助。更多css学习指路:css教程

    专题推荐:css 精灵图技术
    品易云
    上一篇:css权重的计算规则 下一篇:css滑动门技术是什么

    相关文章推荐

    • css旋转属性如何理解• css设置文字居中的两种方法• css中删除input输入框的阴影• css中margin是什么?怎么设置?• css3中设置元素宽度的方法

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网