自定義網址在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遊標。