如何删除边框和jpg之间的背景图像（见图）？答案

【问题标题】：How to remove the background image which is in between of border and jpg(see image)?如何删除边框和jpg之间的背景图像（见图）？
【发布时间】：2020-12-28 14:00:16
【问题描述】：

如果您仔细观察，边框和个人资料图片之间会出现一条蓝色的小线。如何删除边框和 jpg 之间的小背景颜色/线条（背景图像）？

这是我的 CSS 代码：

 .profile-pic{

  border-radius: 50%;

  position: relative;

  position: relative;

  top: -55px;

  border: 5px solid white;

【问题讨论】：

标签： html css frontend web-deployment

【解决方案1】：

这是由于网页如何使用抗锯齿渲染边框。边框的边缘有轻微的过渡到透明，看起来更平滑。对图像做了同样的事情，所以结果是一点点背景显示出来。

请注意，您可以在此 sn-p 中看到图像周围有一点红色。

body
{
padding: 50px;
background-color: red;
}

img
{
border-radius: 50%;
position: relative;
top: -55px;
border: 5px solid white;
width: 100px;
height: 100px;
}

&lt;img src="https://placeimg.com/100/100/people"/&gt;

在您的示例中，您可以更好地看到这一点，因为您提到的蓝线仅围绕父视图的蓝色部分上方的图像部分。底部是白色的，没有相同的效果。

您可以通过将您想要的任何颜色作为图像的背景颜色来解决此问题，这样当抗锯齿发生时，您的颜色就会显示出来。我选择了白色来匹配边框颜色。

body
{
padding: 50px;
background-color: red;
}

img
{
border-radius: 50%;
position: relative;
top: -55px;
border: 5px solid white;
width: 100px;
height: 100px;
background: white;
}

&lt;img src="https://placeimg.com/100/100/people"/&gt;

【讨论】：