精灵图 CSS sprite

最新推荐文章于 2022-11-27 15:40:33 发布

Asunny5

最新推荐文章于 2022-11-27 15:40:33 发布

阅读量120

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_60979337/article/details/127593628

版权

精灵图：
技术目的：有效的减少服务器接收和发送请求的次数，提高页面的加载速度
语法：1）主要利用background-position
2）一般情况下往左，往上走则为负数
注意：盒子和背景图片的大小位置需要测量准确

/！--先设置盒子的大小--/   
 <style>
        .box {
            float: left;
            margin-left: 20px;
            width: 110px;
            height: 120px;

        }
/！--设置每个需要显示图片的位置--/

        .box1 {
            background: url(./images/abcd.jpg) no-repeat;
        }

        .box2 {
            background: url(./images/abcd.jpg) no-repeat -257px -414px;
        }

        .box3 {
            background: url(./images/abcd.jpg) no-repeat -476px -411px;

        }

        .box4 {
            background: url(./images/abcd.jpg) no-repeat -256px -266px;

        }

        .box5 {
            background: url(./images/abcd.jpg) no-repeat -256px -266px;

        }

        .box6 {
            background: url(./images/abcd.jpg) no-repeat -366px -546px;

        }
    </style>

<body>
    <!-- 
        在body里面直接调用
     -->
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>

</body>