CSS雪碧图的使用

最新推荐文章于 2023-04-10 22:00:00 发布

极客研究者

最新推荐文章于 2023-04-10 22:00:00 发布

阅读量469

点赞数

分类专栏：前端文章标签： css html css3 html5

本文链接：https://blog.csdn.net/qq_34550459/article/details/105413224

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS 雪碧图应用原理：
使用PS将多个小图标合并到一张图片上,然后通过设置background-position来切换,不同的图标,这样图片会同时加载到网页中,有效的避免出现闪烁的问题。

        雪碧图的使用步骤：
        1.确定要使用的图标
        2.测量图标
        3.根据测量结果创建元素(元素的宽高为图标的宽高)
        4.将雪碧图片设置为元素的背景图片
        5.设置一个偏移量以显示正确的图片
   雪碧图的特点:
        一次将多个图片加载到网页中,降低请求次数,加快访问速度,提升用户的体验

这里我们需要借助PS去打开合并后的雪碧图,测量需要使用的图标的大小,以及距离原点的位置。

已做好的雪碧图:
在这里插入图片描述
在PS中测量大小以及位置:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>雪碧图的使用</title>
    <style>
      /*
        雪碧图的使用:
                使用PS将多个小图标合并到一张图片上,然后通过设置background-position来切换
                不同的图标,这样图片会同时加载到网页中,有效的避免出现闪烁的问题

                雪碧图的使用步骤：
                1.确定要使用的图标
                2.测量图标
                3.根据测量结果创建元素
                4.将雪碧图片设置为元素的背景图片
                5.设置一个偏移量以显示正确的图片
        雪碧图的特点:
                一次将多个图片加载到网页中,降低请求次数,加快访问速度,提升用户的体验
    */
     a:link{
            display:block;
            width:93px;
            height:29px;
            margin:0px auto;

            background-image:url('./images/btn.png');
        }

        a:hover{
            background-position:-93px 0;
        }

        a:active{
            background-position:-186px 0;
        }

        .amazon{
            width:128px;
            height:46px;
            background-position:0px 0px;
            background-image:url('./images/amazon-sprite_.png');
        }

        .amazon2{
            width:98px;
            height:30px;
            background-position:-9px -51px;

            /* background-position 
            第一个值:设置x轴偏移量
            第二个值:设置y轴偏移量 
            */
            /* background-position:0px -46px; */
            background-image:url('./images/amazon-sprite_.png');
        }

        .amazon3{
            width:42px;
            height:30px;  
            background-image:url('./images/amazon-sprite_.png');
            background-position:-58px -338px;
        }

    </style>
</head>
<body>
        <div class="amazon"></div>
        <div class="amazon2"></div>

        <div class="amazon3"></div>

        <a href="#"></a>
</body>
</html>

实现效果:
在这里插入图片描述

极客研究者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS雪碧图的使用

CSS 雪碧图应用原理：使用PS将多个小图标合并到一张图片上,然后通过设置background-position来切换,不同的图标,这样图片会同时加载到网页中,有效的避免出现闪烁的问题。雪碧图的使用步骤： 1.确定要使用的图标 2.测量图标 3.根据测量结果创建元素(元素的宽高为图标的宽高) 4.将雪碧图片设置为元...
复制链接

扫一扫