带有自定义 url 的光标 属性 在 Chrome 中显示不正确

Question

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

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

如果我们看下图，您可以在 google chrome 上看到问题。

这不会发生在其他浏览器上。如火狐：

这里是 link 使用的光标图像： 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 光标。