css精灵图技术

最新推荐文章于 2024-04-26 00:08:45 发布

才不是小弱鸡

最新推荐文章于 2024-04-26 00:08:45 发布

阅读量247

点赞数

分类专栏： web css

本文链接：https://blog.csdn.net/qq_40996739/article/details/108736739

版权

web 同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

0x00 为什么要用精灵图sprites

网页所使用的小图标很多，如果分开储存，则会多次向服务器发送请求，增大服务器的负载，降低页面的加载速度。

0x01 精灵图原理

精灵图主要针对背景图片，将多个背景图片整合到一张图片中

精灵图的本质就是通过bgc-position来移动图片位置，达到显示想要的背景图片的效果

因此，使用精灵图需要精确测量各背景图片位置

0x02 实例

使用精灵图显示自己的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <span class="j"></span>
        <span class="w"></span>
        <span class="t"></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>

才不是小弱鸡

关注

0
点赞
踩
0

收藏

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

0x00 为什么要用精灵图sprites 网页所使用的小图标很多，如果分开储存，则会多次向服务器发送请求，增大服务器的负载，降低页面的加载速度。0x01 精灵图原理精灵图主要针对背景图片，将多个背景图片整合到一张图片中精灵图的本质就是通过bgc-position来移动图片位置，达到显示想要的背景图片的效果因此，使用精灵图需要精确测量各背景图片位置...
复制链接

扫一扫