精灵图得使用步骤

最新推荐文章于 2024-04-18 20:06:11 发布

浩哥学习编程之路

最新推荐文章于 2024-04-18 20:06:11 发布

阅读量576

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/m0_46978034/article/details/115341790

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.首先我们为什么要使用精灵图

我们首先看一下代码

  <style>
        .btn:link {
            display: block;
            width: 93px;
            height: 29px;
            background-image: url(./btn/link.png);
        }
        
        .btn:hover {
            background-image: url(./btn/hover.png);
        }
        
        .btn:active {
            background-image: url(./btn/active.png);
        }
    </style>
</head>

<body>
    <a href="javascript::" class="btn"></a>
</body>

在这里插入图片描述
会发现一个问题就是当按钮状态从link 切换到hover时或从hover却换到active时，第一次会出现闪烁的状态这是因为上面原有导致得？

浏览器在加载页面时需要先加载当前页面，然后在加载页面中引入得外部资源而外部资源不是立刻加载得，外部资源是在需要得时候在会被加载，当我们从link切换到hover状态时，需要去加载hover得图片
而加载和显示直接存在一个时间差，这样在图片加载时会出现没有背景得情况导致了闪烁。

解决办法

我们可以将多个按钮保存到一张图片中，这样我们一次性加载所以有得图片，然后通过偏移量来修改我们图片得位置即可，这就是精灵图得作用

优点

将多个图片保存到一个图片中，降低发送请求得次数，增加用户得访问速度
将多个图片保存到一个图片中，也会降低图片得总大小，增快加载速度

缺点
不能使用在img图片中只能使用在背景图片中

使用精灵图得步骤

创建一个元素，大小就是图标得大小
将精灵图设置为元素得背景
设置背景得偏移量，使其可以显示图标

    <style>
        .btn:link {
            display: block;
            width: 93px;
            height: 29px;
            background-image: url(./btn/btn.png);
        }
        
        .btn:hover {
            background-position: -93px 0px;
        }
        
        .btn:active {
            background-position: -186px 0px;
        }
    </style>
</head>

<body>
    <a href="javascript::" class="btn"></a>
</body>

在这里插入图片描述

浩哥学习编程之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精灵图得使用步骤

1.首先我们为什么要使用精灵图我们首先看一下代码 <style> .btn:link { display: block; width: 93px; height: 29px; background-image: url(./btn/link.png); } .btn:hover { background-i
复制链接

扫一扫