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

    css精灵图技术是什么

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

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

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

    实例

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    <!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学习网