代码之家 › 专栏 › 技术社区 › Gurdeep

雪碧是缩放而不是裁剪

rollover sprite css html

Gurdeep · 技术社区 · 9 年前

我创建了这些图像以实现翻转效果,下面的代码确实有效。然而,当我尝试为网站上的另一个按钮添加一个模式弹出窗口时,它最近被打破了。我已经恢复了对代码的更改(删除了模式弹出窗口),但精灵仍然被破坏。它不只是显示亮的横幅,然后在悬停时显示暗的,而是显示两个精灵片段并将其放大。是什么导致了这种情况,我如何才能阻止这种情况发生?

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 回复 | 直到 9 年前

Hidden Hobbes 9 年前

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

第一个是您正在使用 background-size: 200px 258px; 。指定的长度值 background-size 将强制背景到这些维度。这会将412 x 260的图像压缩到200 x 258,这就是显示整个图像的原因。

<length>

A. <长度> 将背景图像缩放到相应维度中指定长度的值。不允许负长度。

背景大小( 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、罗拉牌手表 , a、滚动 , a、滚动 和 a、滚动
去除 背景大小:200px 258px; 从…起 a、罗拉牌手表 , a、滚动 , a、滚动 和 a、滚动

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>

Carol McKay 9 年前

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