“CSS精灵图”详解 及 案例应用

一、 精灵图简介

1、 什么是精灵图？
就是将几张较小的图片放在一张大图上，通过background-position调整位置进行显示

• 也可以叫做雪碧技术 也叫做css sprite

2.、 使用精灵图的好处 :

• 将多张较小的图片放在一张大图上，减少浏览器对服务器的请求，从而减轻服务器的压力。

3、 精灵图的使用

• 如果我们需要的一张图片在精灵图上，必须要了解这个图片的大小以及在精灵图上的位置
• 在页面上将这个图片显示出来，在显示的时候一定要注意我们容器的大小一定要和这个图标的大小一样
• 将精灵图设置为容器的背景图片，并且根据图片所在的位置将背景图片进行平移

二、 精灵图案例：

2-1 精灵图如下【是白底的，得好好瞅瞅😂】：

2-2 使用如上图片中 4个图标 的 播放器简单案例

2-2-0 效果展示

2-2-1 html文件

<div class="footer">
<div class="contain">
<div class="con-btn">
                <a href="javascript:;" class="player-btn btn-prev" title="上一首">
                </a>
                <a href="javascript:;" class="player-btn btn-play" title="暂停/继续">

                </a>
                <a href="javascript:;" class="player-btn btn-next" title="下一首">
                </a>
                <a href="javascript:;" class="player-btn btn-order" title="循环控制">
                </a>
            </div>
    </div>
</div>

2-2-2 css【注意 ： background-position: ;】

.footer {
  z-index: 100;
  height: 100px;
  bottom: 0;
  width: 100%;
  position: absolute;
}
.contain {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  max-width: 1200px;
  margin: 0 auto;
}

/* 带图片的按钮 */
.player-btn {
  background-image: url("../images/player.png");
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.player-btn:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
/* 控制按钮(上一首、播放、下一首)区域 */
.con-btn {
  float: left;
  width: 130px;
  height: 100%;
  position: relative;
  margin: 0 10px;
}
.con-btn a {
  display: inline-block;
  position: absolute;
  top: 50%;
}
.btn-prev {
  background-position: 0 -30px;
  width: 19px;
  height: 20px;
  margin-top: -10px;
}

.btn-play {
  width: 19px;
  height: 29px;
  margin-top: -14.5px;
  left: 36%;
  margin-left: -10.5px;
}
.btn-next {
  background-position: 0 -52px;
  right: 30%;
  width: 19px;
  height: 20px;
  margin-top: -10px;
}
.btn-order {
  background-position: 0 -173px;
  background-size: 450%;
  right: 0;
  width: 25px;
  height: 25px;
  margin-top: -10px;
}