我怎样才能摆脱我图像中的这条小线？ （CSS3，悬停效果）

Posted 2023-03-06

【中文标题】我怎样才能摆脱我图像中的这条小线？ （CSS3，悬停效果）

【英文标题】：How can I get rid of this little line in my image ? (CSS3 , hover on effect)

【发布时间】：2013-12-12 02:07:35

【问题描述】：

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

代码是

<table><tr><td background="usa-inchisa2.png"   id="usa"></td> </tr>

我有一个外部 css：

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


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

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

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

【问题讨论】：

使用 CSS 作为背景，而不是单元格属性。

事实上，由于您使用表格而不是表格数据进行布局，因此您真的应该完全放弃表格。您可以使用display CSS 属性（值为table、table-cell、table-row 等）保持相同的布局效果，而不会出现语义不正确的标记。

你有 JSFiddle 或 Plunk 吗？

正如@Marcin 所说：背景中的图像默认设置为重复。如果图像的高度为 100 像素且容器为 105 像素，您将在下一次重复图像时看到 5 像素。

正如@Deekey 举例说明的将容器大小调整为图像大小也是一种解决方案。但即使您知道容器 必须 大于图像大小，您也可以使用 no-repeat。

【参考方案1】：

请使用这个 CSS

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

【参考方案2】：

虽然我同意@ajp15243，但我会通过尝试解决您的问题：

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


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

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