javascript - 圆形图像上的图像背景颜色渗色

Question

我有一个圆形图像(个人资料图片)。此图像可能是半透明的，也可能不是半透明的，因此我给它设置了背景颜色以确保它始终可见。我遇到的问题是即使在完全不透明的图像上也可以看到背景颜色(见图)。
在弄乱了边框和填充之后，我找到了一种解决方法。我发现添加一个不可见的边框，然后删除它可以解决问题。为了处理动态添加和删除的图像，我在计时器上执行此操作(这比在将图像添加到页面的所有位置都注入(inject)一些代码更容易)。这就是我所做的，它似乎有效，但我不喜欢它。

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

<img>有 width和 height属性设置为 32 .它还有一个 border-radius的 16px当然还有 background-color .
肯定有比 setInterval 更好的方法来处理这个问题。以上。更改边框似乎会导致元素再次(并且正确地)呈现。也许有一种方法可以更直接地做到这一点？
由于这是一个奇怪的渲染问题，我应该提到我正在使用 Chrome 87 .
我发现了另一种更有效的解决方法。每当将图像添加到页面时，我都会附加一个更新边框的 onload 监听器。

img.onload = () => {
  setTimeout(() => img.style.border = "0 solid transparent", 100);
};

这仍然感觉像一个丑陋的黑客。此外，图像周围的边缘会短暂出现，然后在页面加载时消失。我正在寻找更好的方法。
我在 Safari 中尝试过，但更新边框没有帮助。看来我需要跳出框框思考。


图1——恶心


图 2 - 所需

Answer 1

哦，整洁，多么有趣的问题!不幸的是，我看了又看，似乎不明白为什么会这样。不过，触发任何类型的回流似乎都可以解决它，因此无论您是否使用边框都应该有效。
但是我想我找到了另一种不需要回流就可以工作的解决方案，那就是使用径向渐变 background-image而不是纯色背景色。
我在这里设置了一个示例笔:https://codepen.io/xhynk/pen/ZEprxqq (很容易增加 ?4 以取消缓存图像并让它再次“表现得很奇怪”。
使用此 CSS 作为图像的背景，似乎可以防止图像足够接近以“流血”通过边缘:

img {
    background-image: radial-gradient(#000 70%, transparent calc(70% + 1px));
}

您可能会放弃 70%下至 69%如果您仍然看到它。我只是试图让它尽可能靠近容器的边缘，+1px calc 使它平滑而不是锯齿状。
您可以在下图中看到，第一个头像有 radial-gradient应用并且没有出血，第二个有固体 background: black而不是。