html - Sprite 正在缩放而不是裁剪

Question

我创建了这些图像以实现翻滚效果，并且以下代码确实有效。但是，当我尝试为网站上的另一个按钮添加模式弹出窗口时，它最近坏了。我已经恢复了对代码的更改(删除了模态弹出窗口)但 Sprite 仍然损坏。它不是只显示浅色横幅，然后在悬停时显示黑色，而是显示两个 sprite 片段并按比例缩小它们。是什么原因造成的，我该如何阻止它发生？

a, img {
  border: none;
  outline: none;
}

a.rolla {
  display: block;
  width: 200 px;
  height: 258px;
  text-decoration: none;
  background: url("http://i.stack.imgur.com/RCPyD.png");
  background-size: 200px 258px;
  background-repeat: no-repeat
}

a.rollb {
  display: block;
  width: 200 px;
  height: 258px;
  text-decoration: none;
  background: url("http://i.stack.imgur.com/RCPyD.png");
  background-size: 200px 258px;
  background-repeat: no-repeat
}

a.rollc {
  display: block;
  width: 200 px;
  height: 258px;
  text-decoration: none;
  background: url("http://i.stack.imgur.com/RCPyD.png");
  background-size: 200px 258px;
  background-repeat: no-repeat
}

a.rolld {
  display: block;
  width: 200 px;
  height: 258px;
  text-decoration: none;
  background: url("http://i.stack.imgur.com/RCPyD.png");
  background-size: 200px 258px;
  background-repeat: no-repeat
}

a.rollover:hover, a.rollover2:hover, a.rollover3:hover {
  background-position: -213px 0;
}

a.rolla:hover, a.rollb:hover, a.rollc:hover, a.rolld:hover {
  background-position: -210px 0;
}

.displace {
  position: absolute;
  left: -5000px;
}

body {
  background: url("rpt.png");
  background-repeat: repeat;
  width: 1024px;
  margin: 0;
  z-index: -1;
}

#banner {
  z-index: 0;
}

#feTable {
  z-index: 1;
  position: absolute;
  top: 455px;
  left: 0;
}

<div width="1024px">
  <img id="banner" src="banner.jpg" height="512 px" width="1024px">
  <table id="feTable" style="width:1024px; left:22px">
    <tr>

      <td align="center" width="200px">
        <a target="_parent" href="" class="rollb"><span class="displace"></a>
      </td>

      <td align="center" width="200px">
        <a target="_parent" href="" class="rolla"><span class="displace"></a>
      </td>

      <td align="center" width="200px">
        <a target="_parent" href="" class="rollc"><span class="displace"></a>
      </td>

      <td align="center" width="200px">
        <a target="_parent" href="" class="rolld"><span class="displace"></a>
      </td>
    </tr>
  </table>
</div>

Answer 1

您的代码有两个主要问题。

首先是您正在使用 background-size: 200px 258px; .指定 background-size 的长度值将强制背景为这些尺寸。这会将 412 x 260 的图像压缩到 200 X 258，这就是显示整个图像的原因。

<length>

A <length> value that scales the background image to the specified length in the corresponding dimension. Negative lengths are not allowed.

背景大小 ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)

第二个是您错误地指定了 width在 a.rolla , a.rollb , a.rollc和 a.rolld . 200 之间的空格和 px意味着它被忽略并增长到包含 td 的宽度(这反过来显示了比所需更多的背景)。

要修复，请进行以下更改:

• 更改 width: 200 px;至 width: 200px;在 a.rolla , a.rollb , a.rollc和 a.rolld
• 删除 background-size: 200px 258px;来自 a.rolla , a.rollb , a.rollc和 a.rolld

a,
img {
  border: none;
  outline: none;
}
a.rolla {
  display: block;
  width: 200px;
  height: 258px;
  text-decoration: none;
  background: url("http://i.stack.imgur.com/RCPyD.png");
  background-repeat: no-repeat
}
a.rollb {
  display: block;
  width: 200px;
  height: 258px;
  text-decoration: none;
  background: url("http://i.stack.imgur.com/RCPyD.png");
  background-repeat: no-repeat
}
a.rollc {
  display: block;
  width: 200px;
  height: 258px;
  text-decoration: none;
  background: url("http://i.stack.imgur.com/RCPyD.png");
  background-repeat: no-repeat
}
a.rolld {
  display: block;
  width: 200px;
  height: 258px;
  text-decoration: none;
  background: url("http://i.stack.imgur.com/RCPyD.png");
  background-repeat: no-repeat
}
a.rollover:hover,
a.rollover2:hover,
a.rollover3:hover {
  background-position: -213px 0;
}
a.rolla:hover,
a.rollb:hover,
a.rollc:hover,
a.rolld:hover {
  background-position: -210px 0;
}
.displace {
  position: absolute;
  left: -5000px;
}
body {
  background: url("rpt.png");
  background-repeat: repeat;
  width: 1024px;
  margin: 0;
  z-index: -1;
}
#banner {
  z-index: 0;
}
#feTable {
  z-index: 1;
  position: absolute;
  left: 0;
}

<div width="1024px">
  <table id="feTable" style="width:1024px; left:22px">
    <tr>
      <td align="center" width="200px">
        <a target="_parent" href="" class="rollb"><span class="displace"></span></a>
      </td>
      <td align="center" width="200px">
        <a target="_parent" href="" class="rolla"><span class="displace"></span></a>
      </td>
      <td align="center" width="200px">
        <a target="_parent" href="" class="rollc"><span class="displace"></span></a>
      </td>
      <td align="center" width="200px">
        <a target="_parent" href="" class="rolld"><span class="displace"></span></a>
      </td>
    </tr>
  </table>
</div>