img 文本周围的奇怪边框答案

【问题标题】：strange border aroung text of imgimg 文本周围的奇怪边框
【发布时间】：2018-06-07 04:39:49
【问题描述】：

我的网站上有不同的图像，其中一些（PNG 图像）在图像的文本部分周围有一个奇怪的灰色边框，如下所示： https://imgur.com/a/yDtM4

文字在图片内部，没有分开。图片的css/html代码为：

#bor_panel {
 border-radius: 12px;
 border: 2px solid #287396;
 padding: 20px;
 width: 170px;
 height: 170px;
 display: flex;
}

<div id="bor_panel">
  <img src="images/raro_page/Ampia_Connettivita_B.jpg" id="raro_panel_connettivita" alt="raro robot connettivita" /> 
</div>

有什么想法吗？好像是正常的img标签...

--------编辑-----

这是原图： https://imgur.com/a/P9LVm

好像还可以

【问题讨论】：

呃，可能是因为文字是这样的吧？
文件中似乎存在问题。它在图像编辑器中的外观如何？能否提供链接或上传图片？
我把原图放到帖子里了。好像还可以
好好检查图像，这个边框是图像的一部分，但你看不到它，因为它在边缘......你把图像放在带有填充的容器内，你可以看到它周围有白色

标签： html css image panel

【解决方案1】：

您的图片有问题。我在 Photoshop 中打开了您的original image，并在缩放图像后发现了这个。您的图像中文本周围有一个灰色空间。

我已经在 Photoshop 中编辑了您的图像，并在下面制作了一个 sn-p。现在没有边界了。

#bor_panel {
  border-radius: 12px;
  border: 2px solid #287396;
  padding: 20px;
  width: 170px;
  height: 170px;
  display: flex;
}
img{
width:126px;
height: 126px;
margin: auto;
}

<div id="bor_panel">
  <img src="https://i.stack.imgur.com/NdgFO.jpg" id="raro_panel_connettivita" alt="raro robot connettivita" />
</div>

【讨论】：

【解决方案2】：

这很奇怪。它是您正在使用的图像的一部分。尝试使用一些图像编辑应用程序来删除该边框。这似乎不是由于 CSS 或 HTML 造成的

【讨论】：

我把原图放到帖子里了。好像还可以
你能分享你实际使用的代码吗？也许在 jsfiddle 或类似的东西上
@lucacatr 检查图像好，这个边框是图像的一部分，但你看不到它，因为它在边缘......你把图像放在容器里面，你可以看到它周围有白色