Question

我正在尝试将图像的一部分用作音量按钮。

html代码

<div class="vol-pro-wrapper">
    <a href="javascript: void(0)" id="volume" class="volume"></a>
</div>

css代码

a {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}
.volume {
  width: 25px;
  height: 25px;
  background-position: -2px -248px;
}
.volume:hover {
  background-position: -31px -248px;
}
.play,.pause, .previous, .next ,.volume {
  background: url(https://music.163.com/style/web2/img/frame/playbar_8.png?
 904c92305ed99579afcff04d0c63709b) no-repeat 0 9999px;
 }

真正奇怪的是，音量不会像预期的那样显示出来。但是当我将音量显示作为我想要的时候。什么原因？先谢谢！

jsfiddle

Answer 1

这条规则......

.play,.pause, .previous, .next ,.volume {
  background: url(https://music.163.com/style/web2/img/frame/playbar_8.png?
 904c92305ed99579afcff04d0c63709b) no-repeat 0 9999px;
 }

...覆盖这一个（.volume）...

.volume {
  width: 25px;
  height: 25px;
  background-position: -2px -248px;
}

...，因为它是在它之后。

只需更改订单：

.play,.pause, .previous, .next ,.volume {
  background: url(https://music.163.com/style/web2/img/frame/playbar_8.png?
 904c92305ed99579afcff04d0c63709b) no-repeat 0 9999px;
 }
.volume {
  width: 25px;
  height: 25px;
  background-position: -2px -248px;
}
.volume:hover {
  background-position: -31px -248px;
}

Answer 2

更改代码中的卷类

body {
  margin: 0;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  /*background-color: #555*/
}

a {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}


.container {
  display: block;
  background-color: #323231;
  width: 300px;
  margin: 0 auto;
  padding: 10px 30px 0 30px;
  text-align: center;
}

.vol-pro-wrapper .volume {
  width: 25px;
  height: 25px;
  background-position: -2px -248px;
}

.vol-pro-wrapper .volume:hover {
  background-position: -31px -248px;
}

.btn-wrapper .play {
  width: 36px;
  height: 36px;
  margin-top: 0;
  background-position: 0 -204px;
}

.btn-wrapper .play:hover {
  background-position: -40px -204px;
}

.btn-wrapper .pause {
  width: 36px;
  height: 36px;
  margin-top: 0;
  background-position: 0 -165px;
}

.btn-wrapper .pause:hover {
  background-position: -40px -165px;
}

.btn-wrapper .previous {
  width: 28px;
  height: 28px;
  background-position: 0 -130px;
  margin-bottom: 4px;
}

.btn-wrapper .previous:hover {
  background-position: -30px -130px;
}

.btn-wrapper .next {
  width: 28px;
  height: 28px;
  background-position: -80px -130px;
  margin-bottom: 4px;
}

.btn-wrapper .next:hover {
  background-position: -110px -130px;
}


.play,.pause, .previous, .next ,.volume {
  background: url(https://music.163.com/style/web2/img/frame/playbar_8.png?904c92305ed99579afcff04d0c63709b) no-repeat 0 9999px;
}

#volume-slider {
  display: none;
}

  <body style="height: 100%">
    <div class="container">

      <h2 class="logo">ff-player</h2>
      <div class="cover-wrapper">
        <img src="" alt="cover" class="cover">
      </div>

      <div class="vol-pro-wrapper">
        <a href="javascript: void(0)" id="volume" class="volume"></a>
      </div>

      <div class="btn-wrapper">
        <a href="javascript: void(0)" id="previous" class="previous"></a>
        <a href="javascript: void(0)" id="play" class="play"></a>
        <a href="javascript: void(0)" id="next" class="next"></a>
      </div>
    </div>
  </body>

背景位置不起作用

2 个答案: