支持Retina的CSS自定义光标

Question

我找不到有关这个主题的任何信息。我想使用CSS创建一个简单的自定义光标。我现在有这段代码：

cursor: url('img/cursor_left.png'), auto;

光标出现了，没有任何问题。但它很模糊，因为它不兼容Retina显示器。有人知道如何解决吗？

谢谢，安吉洛。

- Angelo A

Answer 1

我还没有测试过，但应该可以使用image-set：

cursor: url('img/cursor_left.png'), auto;
cursor: -webkit-image-set(
  url('img/cursor_left.png') 1x,
  url('img/cursor_left_hi.png') 2x
), auto;

- Russell Zahniser

---

重复的行是为了在IE上提供合理的备用选项。在Firefox、Chrome和Safari上，第二个cursor:定义是有效的，覆盖了普通url的定义。 - Russell Zahniser

我在Firefox上尝试了一下，不幸的是它不起作用。（我认为它无法读取-webkit-image-set定义，因为它不是一个webkit浏览器）。 - Angelo A

抱歉，我相信了我链接的文章中的兼容性信息，而没有自己尝试。也许普通的 image-set 可以工作？ - Russell Zahniser

尝试过了，不幸的是Mozilla不支持。对于非webkit浏览器，使用备用方案。 - Angelo A

目前这仅支持Chrome浏览器，在Safari浏览器上存在问题，使其变得几乎无用：使用2倍图像，但显示的尺寸是预期大小的两倍。https://bugs.webkit.org/show_bug.cgi?id=120783 - John

目前在Safari上可以正常工作。即使没有前缀：image-set也足够了。Chrome仍然需要前缀。至于其他浏览器，我认为还没有解决方案... - Merc