css精灵图

最新推荐文章于 2022-10-29 22:59:58 发布

qq_50636169

最新推荐文章于 2022-10-29 22:59:58 发布

阅读量86

点赞数 1

本文链接：https://blog.csdn.net/qq_50636169/article/details/119187973

版权

精灵图（sprites）

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。其核心原理是：将页面中的一些小背景图像整合到一张大图中，这样服务器只需请求一次就好了。
精灵图地使用
主要针对背景图片的使用。将精灵图设置为一个大的背景图，通过移动精灵图来显示出我们想要的部分。

选择器 {
       background-position: x y;}

<style>
        div {
            /* display: inline-block; */
            float: left;
            background-image: url(image1/abcd.png) ;
            background-repeat: no-repeat;
        }
        .box1 {
            width: 105px;
            height: 110px;
            /* background-color: coral; */
            background-position: -217px -137px;
        }
        .box2 {
            width: 104px;
            height: 104px;
            background-position: -252px -560px;
        }
        .box3 {
            width: 104px;
            height: 104px;
            background-position: -252px -560px;
        }
    </style>
</head>
<body>
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box3"></div>
</body>

针对小的背景图片使用
一般情况下精灵图是负值
x轴向右为正值向左为负值，y轴向上为负值向下为正值

精灵图的缺点：当图片文件比较大时，图片本身放大和缩小会失真，且一旦图片制作完毕想要更换将非常复杂。

qq_50636169

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css精灵图

精灵图（sprites）为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。其核心原理是：将页面中的一些小背景图像整合到一张大图中，这样服务器只需请求一次就好了。精灵图地使用主要针对背景图片的使用。将精灵图设置为一个大的背景图，通过移动精灵图来显示出我们想要的部分。选择器 { background-position: x y;}<style> div { /* display: inline-block; */
复制链接

扫一扫