精灵正在缩放而不是裁剪

时间:2016-01-29 08:23:58

标签: html css sprite rollover

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

This is what is happening, it should only show the light banners, and then switch to dark on hover enter image description here

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>

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

首先,您使用的是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

第二个是您在widtha.rollaa.rollba.rollc上错误地指定了a.rolld200px之间的空格意味着它被忽略并且正在增长到包含td的宽度(这反过来显示的背景多于所需的背景)。

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

  • width: 200 px;width: 200px;a.rollaa.rollb
  • 上将a.rollc更改为a.rolld
  • background-size: 200px 258px;a.rollaa.rollba.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>