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