如何去除 border 和 jpg 之间的背景图片（见图）？

Question

如果你仔细看的话，在边框和个人资料图片之间有一条小蓝线。如何删除边框和 jpg 之间的小背景 colour/line（背景图片的）？

这是我的 css 代码：

 .profile-pic{

  border-radius: 50%;

  position: relative;

  position: relative;

  top: -55px;

  border: 5px solid white;

Answer 1

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

请注意，在此代码段中，您可以在图像周围看到一点点红色。

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

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

<img src="https://placeimg.com/100/100/people"/>

在您的示例中，您可以清楚地看到这一点，因为您提到的蓝线仅围绕父视图蓝色部分上方的图像部分。底色偏白，效果不一样

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

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

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

<img src="https://placeimg.com/100/100/people"/>

如何去除 border 和 jpg 之间的背景图片（见图）？

How to remove the background image which is in between of border and jpg(see image)?

html

css

frontend

web-deployment