雪碧图作用

首先为什么要使用雪碧图来制作按钮：

为了用户体验一个按钮往往会设置两到三种的不同的呈现方式Hover：当鼠标移入的状态。Active：当鼠标点击按钮时候的状态。

做完功能之后点击按钮以后会发现图片会有一个非常快速的闪烁对于一个完美的前端工程师来说这个是不能容忍的！因为执行hover和active是闪烁会造成一次短暂性空白

为了解决这个问题我们要找到问题的根源所在我们需要了解问题所在：

背景图片是以外部资源的形式加载进入网页的，浏览器每每加载一个外部资源就需要单独的发送一次请求，但是我们的外部文件不是同时加载，浏览器会在资源被使用的时候才会去加载并缓存，浏览器一上来只会加载当前背景图片由于hover和active的状态没有马上的触发。并没有立刻加载特殊样式，只有特殊样式hover被触发才会开始加载造成短暂的空白。

这里有一个解决的办法就是将所有图片做到一张图片里面从而消除图片不能及时加载的问题。通过背景移动background-position属性来设置图片的偏移量和默认图片只从左上角显示的原则来解决问题：

下面是背景原图：

 代码部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>雪碧图</title>
    <style>
        div{
            width: 131px;
            height: 130px;
            border: 1px solid red;
            background-image: url("img/img.png");
        }
        .two{
            width: 131px;
            height: 162px;
           background-position: -131px 0;
        }
        .three{
            width: 131px;
            height: 162px;
            background-position: -262px 0;
        }
    </style>
</head>
<body>
    <div  class="one"></div>
    <div  class="two"></div>
    <div  class="three"></div>
   

</body>
</html>

 

通过背景偏移和盒子默认左上角显示做出的效果显示：

 

posted @ 2019-09-15 11:07  牛耀民  阅读(416)  评论(1)  编辑  收藏  举报