img的奇怪边框

Question

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

文字在图像内部，未分开。 图像的css / html代码为：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？这似乎是一个正常的img标签...

------ ------ EDIT

这是原始图片： 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