我创建了这些图像以实现翻滚效果,并且以下代码确实有效。但是,当我尝试为网站上的另一个按钮添加模式弹出窗口时,它最近坏了。我已经恢复了对代码的更改(删除了模态弹出窗口)但 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>
最佳答案
您的代码有两个主要问题。
首先是您正在使用 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>
关于html - Sprite 正在缩放而不是裁剪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35079877/