html - 为什么黄色/白色背景会弄乱我的形象？

Question

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

代码在这里: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

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