为什么黄色/白色背景会弄乱我的图像？

Question

我正在使用我在图像背景上设计的徽标图像。每当背景包含黄色/白色颜色时，我的徽标就会突然出现红色像素。

此处代码：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>

在黑色/红色背景下，一切看起来都很好。在白色/黄色背景上出现奇怪的红色像素。

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

编辑：谢谢大家的回答。问题确实出在我的电脑上。问题只出在 Chrome 上，在 Mozilla 上一切看起来都很好。一定是我的显卡驱动有问题。

Answer 1

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