html - 我怎样才能去掉图像中的这条小线？ (CSS3，悬停效果)

Question

我有一个问题。我对网页设计相当陌生。我正在制作一个网站，其中包含当我将鼠标悬停在门上时显示为打开的小门图像。它们稍后将包含链接。

代码是

<table><tr><td background="usa-inchisa2.png" height="232px" width="181px" id="usa"></td> </tr>

我有一个外部 CSS:

#usa {
background-image: url('usa-inchisa2.png');
height:223px;
width :181px;
}

#usa:hover {
background-image: url('usa-deschisa2.png');

当我将鼠标悬停在上面时，我得到了这个:

图像底部有一些残留线。我不知道它是从哪里来的。有一次我设法删除了它，但我不记得我做了什么。它与表格边框有什么关系吗？ 你能帮我吗？谢谢

Answer 1

尽管我同意@ajp15243 的观点，但我会通过尝试以下方法解决您的问题:

#usa {
background-image: url('usa-inchisa2.png');
background-repeat:no-repeat;
height:223px;
width :181px;
}

#usa:hover {
background-image: url('usa-deschisa2.png');

您可能已经注意到，我将“background-repeat”改为“no-repeat”。这是因为看起来您在该屏幕截图中有不止一张图像。您遇到问题的图像比其余图像小几个像素。由于默认情况下表格行的高度对于该行中的所有单元格都是相同的，因此背景图像在 Y 轴上重复。