为什么 yellow/white 背景会弄乱我的形象？

Question

我正在使用我在图像背景上设计的徽标图像。每当背景包含 yellow/white-ish 颜色时，我的徽标就会不知从哪里冒出红色像素。

代码在这里：jsfiddle

<div style="background-color:black;">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>
<div style="background-color:red;">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>
<div style="background-color:yellow;">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>
<div style="background-color:white;">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>
<div style="background:url('https://images-na.ssl-images-amazon.com/images/I/61IxMLc8xHL._SX425_.jpg');">
  <img src="https://i.ibb.co/DrNSqdq/logostern.png" height="100px">
</div>

在 black/red 背景上一切看起来都很好。在 white/yellow 上出现背景奇怪的红色像素。

我是不是在保存图像时做错了什么或者这里发生了什么？

编辑：谢谢大家的回答。问题确实出在我的电脑上。问题只出现在 Chrome 上，在 Mozilla 上一切正常。肯定是我的显卡驱动有问题。

Answer 1

我认为这是您的系统图形处理器或浏览器的问题。因为在我这边我可以看到它很好。

为什么 yellow/white 背景会弄乱我的形象？

Why yellow/white backgrounds mess up my image?

html

css

image

photoshop