Sprite 正在缩放而不是裁剪

Question

我为翻转效果创建了这些图像，下面的代码确实有效。但是，当我尝试为网站上的另一个按钮添加模式弹出窗口时，它最近坏了。我已经恢复了对代码的更改（删除了模态弹出窗口）但精灵仍然损坏。它不是只显示浅色横幅，然后在悬停时显示黑色，而是显示两个 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

a.rolla, a.rollb {
 overflow:hidden;
}

Answer 2

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

首先是您正在使用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)

第二个是您在 a.rolla、a.rollb、a.rollc 和 a.rolld 上错误地指定了 width。 200 和 px 之间的 space 意味着它被忽略并且正在增长到包含 td 的宽度（这反过来显示了比需要的更多的背景） .

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

在 a.rolla、a.rollb、a.rollc 和 a.rolld

width: 200 px;

width: 200px;

从 a.rolla、a.rollb、a.rollc 和 a.rolld

background-size: 200px 258px;

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>

Sprite 正在缩放而不是裁剪

Sprite is scaling instead of cropping

html

css

sprite

rollover