img文本周围的奇怪边框

Question

我的网站上有不同的图像，其中一些（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

好像没问题

Answer 1

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

我在photoshop中编辑了你的图像并在下面制作了一个片段。现在没有边界了。

#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>

Answer 2

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