Javascript 圆形图像的背景色溢出_Javascript_Css

Javascript 圆形图像的背景色溢出

javascript css

Javascript 圆形图像的背景色溢出,javascript,css,Javascript,Css,我有一张圆形的图片（个人资料图片）。这个图像可能是半透明的，也可能不是半透明的，所以我给了它一个背景色，以确保它始终可见。我遇到的问题是，即使在完全不透明的图像上，背景色也是可见的（见图）在搞乱了边界和填充之后，我找到了一个解决办法。我发现添加一个不可见的边框，然后删除它可以解决这个问题。为了处理动态添加和删除的图像，我在一个计时器上完成了这项工作（这比在将图像添加到页面的所有位置注入一些代码要容易得多）。这就是我所做的，看起来很管用，但我不喜欢 setInterval(() => {

我有一张圆形的图片（个人资料图片）。这个图像可能是半透明的，也可能不是半透明的，所以我给了它一个背景色，以确保它始终可见。我遇到的问题是，即使在完全不透明的图像上，背景色也是可见的（见图）

在搞乱了边界和填充之后，我找到了一个解决办法。我发现添加一个不可见的边框，然后删除它可以解决这个问题。为了处理动态添加和删除的图像，我在一个计时器上完成了这项工作（这比在将图像添加到页面的所有位置注入一些代码要容易得多）。这就是我所做的，看起来很管用，但我不喜欢

setInterval(() => {
  for (const img of document.getElementsByTagName("img")) {
    if (img.style.border.length) {
      img.style.border = "";
    } else {
      img.style.border = "0 solid transparent";
    }
  }
}, 500);

的

宽度

和

高度

属性设置为

。它还有

边界半径为16px
，当然还有背景色
肯定有比上面的setInterval
更好的方法来处理这个问题。更改边框似乎会导致再次（正确）渲染元素。也许有更直接的方法
由于这是一个奇怪的渲染问题，我应该提到我使用的是chrome87
我找到了另一个更有效的解决方法。每当向页面添加图像时，我都会附加一个更新边框的onload侦听器
这仍然感觉像一个丑陋的黑客。此外，图像周围的边缘在加载页面时短暂出现，然后消失。我在寻找更好的方法
我在Safari中尝试过这一点，但更新边界没有帮助。看来我需要跳出框框思考


图1-恶心


图2-期望的
我试图复制你刚才说的内容。它似乎工作得很好
据我所知，我正在考虑一个可能的错误，即替换图像的固定宽度并将其设置为100%，而不关心img
标记中图像的高度
在周围的div中设置图像的高度和宽度，并为其设置背景色
img.onload = () => {
  setTimeout(() => img.style.border = "0 solid transparent", 100);
};


img{
背景颜色：蓝色；
边界半径：50%；
宽度：100%；
}
#图像容器{
宽度：128px；
高度：128px；
背景：轻海绿色；
}

只需将其复制粘贴到中即可查看
哦，太好了，这是一个多么有趣的问题！不幸的是，我看了又看，看了又看，似乎看不出为什么会发生这种情况。触发任何形式的回流似乎都能解决这个问题，所以不管你是否使用边界都应该有效
然而，我认为我已经找到了另一种解决方案，它可以在不需要回流的情况下工作，那就是使用径向渐变背景图像
，而不是纯色背景
img.onload = () => {
  setTimeout(() => img.style.border = "0 solid transparent", 100);
};

我在这里设置了一个示例笔：（可以很容易地增加？4
以取消图像缓存并使其再次“表现怪异”
使用此CSS作为图像的背景，似乎可以防止图像靠近边缘而“出血”：
<!DOCTYPE html>
<html>
<head>
<style>
img {
    background-color: blue;
    border-radius: 50%;
    width: 100%;
}
#image-container {
    width: 128px;
    height: 128px;
    background: lightseagreen;
}
</style>
</head>

<body>
<div id="image-container">
  <img src="img_avatar.png"/>
 </div>
</body>

</html>

如果您仍然看到它，您可能会将70%
降到69%
。我只是尝试让它尽可能靠近容器的边缘，+1px计算将其平滑，而不是锯齿状
您可以在下图中看到，第一个化身应用了径向梯度，并且没有出血，第二个化身有坚实的背景：黑色，而实际上是黑色
您能在沙箱上共享其中任何一张图像吗？我将您的答案复制到了W3S，然后单击了“运行”按钮。背景颜色正在流血（图1）。如果我再次单击“运行”按钮（不做任何其他操作！），问题就解决了（图2）@IndianaKernick可以证实。在铬中，边缘在第二次执行时消失，而在FF中，它只是停留在那里。