html - 具有自定义 url 的光标属性无法在 Chrome 中正确显示

Question

我将 CSS cursor 属性与通过 URL 指定的自定义图像一起使用。

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

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

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

这是使用的光标图像的链接: 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 光标。