精灵正在缩放而不是裁剪

Question

我为翻​​转效果创建了这些图像，以下代码确实有效。然而，当我尝试为网站上的另一个按钮添加模态弹出窗口时，它最近破了。我已经将更改恢复为代码（删除了模式弹出窗口）但精灵仍然被破坏。它不是仅显示灯光横幅，而是显示悬停时的黑暗，而是显示两个精灵段并将它们缩放。导致这种情况的原因是什么以及如何阻止它发生？

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>

     

<length>值，可将背景图像缩放到相应维度中的指定长度。不允许使用负长度。

background-size（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>