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

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

Answer 2

你的图片有问题。我在 photoshop 中打开你的 original image 并在缩放图像后找到了这个。您的图像中文字周围有灰色 space。

我已经在 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>

img 文本周围的奇怪边框

strange border aroung text of img

html

css

image

panel