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

Question

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

在弄乱了边框和填充之后，我找到了一种解决方法。我发现添加一个不可见的边框，然后删除它可以解决问题。为了处理动态添加和删除的图像，我在计时器上执行此操作（这比在将图像添加到页面的所有位置都注入一些代码更容易）。这就是我所做的，它似乎有效，但我不喜欢它。

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为。它也有一个of ，当然还有一个.height32border-radius16pxbackground-color

当然，必须有比setInterval上述更好的方法来处理这个问题。更改边框似乎会导致元素再次（并且正确地）呈现。也许有一种方法可以更直接地做到这一点？

由于这是一个奇怪的渲染问题，我应该提到我正在使用Chrome 87。

我发现了另一种更有效的解决方法。每当将图像添加到页面时，我都会附加一个更新边框的 onload 侦听器。

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

这仍然感觉像一个丑陋的黑客。此外，图像周围的边缘会短暂出现，然后在页面加载时消失。我正在寻找更好的方法。

我在 Safari 中尝试过，但更新边框没有帮助。看来我需要跳出框框思考。

---

图1——恶心

---

图 2 - 所需

标签： javascriptcss

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而不是流血。