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

【问题标题】：Cursor property with custom url not displaying correctly in Chrome具有自定义 url 的光标属性在 Chrome 中无法正确显示
【发布时间】：2016-12-21 00:48:37
【问题描述】：

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

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

如果我们看下面的图片，你可以在谷歌浏览器上看到问题。

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

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

我最初认为问题在于图像中使用了半透明。但是图像完全没有半透明。

这里发生了什么，我将如何解决这样的问题？

谢谢。

【问题讨论】：

你能添加一个链接到你正在使用的图形吗？
@tedmiston 我已经更新了问题！

标签： html css image google-chrome cursor

【解决方案1】：

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

.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 光标。

【讨论】：

是的，我仍然遇到这些问题！但是，光标 1 并没有那么明显。我不确定为什么会这样。
@DavidCallanan 我在答案中添加了一个屏幕截图。这与您的外观相似还是不同？另外，您使用的是什么浏览器+操作系统？
比这差很多。我在 Ubuntu 14.04 64 位上使用 Chrome 51.0.2704.79
@DavidCallanan 当我将提供的图像放入编辑器时，看起来它们确实具有 alpha 透明度。再深入一点，Chromium 似乎在最近有过issues with alpha transparent custom cursors（尽管它们今天似乎已经解决了）。我包含的 sn-p 在 Safari 和 Firefox 中对我来说看起来差不多。您可以检查其他几个浏览器，看看它是否适合您？
我检查了 Firefox，Firefox 没问题，所以它一定是 chrome 的东西。我可能会删除 alpha 透明度，看看是否可以解决它。感谢您的帮助。