自定义网址未在Chrome中正确显示的Cursor属性

Question

我正在使用带有网址指定的自定义图片的CSS cursor属性。

但是，在Chrome上执行此操作时，光标图像周围会出现白点。

如果我们查看下面的图片，您可以在Google Chrome上看到问题。

其他浏览器不会发生这种情况。比如firefox：

以下是使用的光标图像的链接： http://imgur.com/a/dooCC

我原本以为问题在于图像中使用半透明。但是图像根本没有半透明度。

这里发生了什么，我将如何修复这样的事情？

感谢。

Answer 1

我尝试在Mac OS X 10.11上使用Chrome 52.0重现此示例，但我没有看到锯齿状的白边。这个片段是否为您显示锯齿状的白色边缘？

.cursor-test {
  height: 200px;
  width: 100%;
}

#cursor-test-1 {
  background-color: red;
  cursor: url('http://i.imgur.com/jaYSPxo.png'), auto;
}

#cursor-test-2 {
  background-color: blue;
  cursor: url('http://i.imgur.com/aFU13SN.png'), auto;
}

<div id="cursor-test-1" class="cursor-test"></div>
<div id="cursor-test-2" class="cursor-test"></div>

更新：这是一个关于它如何找我的动画gif截图。我尝试捕获常规屏幕截图，但OS X似乎隐藏了屏幕截图中的自定义CSS游标。