CSS精灵图的使用

最新推荐文章于 2024-07-15 21:24:13 发布

欧神仙浑身都是假动作

最新推荐文章于 2024-07-15 21:24:13 发布

阅读量305

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/spech1ess/article/details/109900221

版权

一.什么是精灵图？

精灵图就是将很多很多的小图标放在一张图片上,就称之为精灵图

二.精灵图的优点是什么？

1.将多张图片合并到一张图片中，可以减小图片的总大小。
2.将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

三.实例演示

在下列精灵图中找到放大镜
在这里插入图片描述
实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .demo{
        width: 30px;
        height: 30px;
        background-image: url(img/topfoot-spr.png);
        background-position: -380px -35px;   
        background-repeat: no-repeat;
    }
 
</style>
<body>
    <div class="demo">
    </div>
</body>

通过引用背景图片的形式找到这张精灵图，然后背景平铺：background-repeat设置为不平铺，然后给自己需要的放大镜图片一个合适的宽高，所以这里我们的宽高设置为30个像素，然后通过背景定位background-position来找到我们所需要的部分。其中css样式中的background-position第一个数值-380px是让图片相对div向左移动380像素值，-35px则是像上平移35个像素值，所以我们可以通过这种方式来获取图片中任意位置我们所需要的部分！
最终效果呈现
在这里插入图片描述
可以看到这里只出现了我所需要的大图中的放大镜部分，其他部分均没有出现。你还在等什么，赶紧去使用精灵图吧！