自定义网址在Chrome中无法正确显示的光标属性

Question

我正在使用CSS cursor属性和使用URL指定的自定义图像。

但是，在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游标。