自定义光标在 Windows 操作系统上像素化答案

【问题标题】：Custom cursor is pixelating on Windows OS自定义光标在 Windows 操作系统上像素化
【发布时间】：2020-04-07 10:09:39
【问题描述】：

我已经实现了自定义光标，但它在 Windows Chrome 上看起来像素化（特别是 1366 * 768 分辨率）（在 Mac OS 上没有检查）。你可以在这里看到代码sn-p：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <meta name="description" content="This is an example of a meta description.">
    <style>
        body {
            cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;
        }
    </style>
  </head>
  <body>
    Testing
  </body>
</html>

我也将 png 更改为 svg 图像，但没有成功。任何建议将不胜感激。

请找到相同的堆栈 sn-p：

 body {
            width: 999px;
            height: 500px;
            cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;
        }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <meta name="description" content="This is an example of a meta description.">
  </head>
  <body>
    Testing
  </body>
</html>

【问题讨论】：

我们无法通过 sn-p 看到它，因为这些图像资产不存在；如果它们足够小，您可以使用数据 URI 嵌入它们，或者通过问题编辑器中的图像工具将它们上传到 imgur，然后将 URL 复制并粘贴到代码中。用Stack Snippet 包裹起来，然后我们可以看到一些东西......
@HereticMonkey 我添加了堆栈 sn-p。
会不会是高dpi屏幕的原因？
高dpi屏幕像素化程度更高。
这让我想起了IE4和netscape navigator

标签： javascript html css chromium text-cursor

【解决方案1】：

body{

  width: 600px;
  height: 500px;
cursor:-webkit-image-set( url(http://www.ivank.net/veci/crosshair.png) 5x  ) 40 40, auto;
}

<body style="">

-webkit-image-set( url(http://www.ivank.net/veci/crosshair.png) 5x  ) 40 40, auto;

</body>

我找到了另一种解决方案，它可以正常工作，正如您所需要的那样：

http://www.ivank.net/veci/cursors_dpr.html

看看吧。

我不确定Cursor image-set 是如何工作的，但我怀疑它不适用于绝对URL，根据我的观察，image-set URL 正在使用静态URI。但我尝试将静态URI 更改为绝对URL，效果也很好。

请看一下，这可能对您有更多帮助。

PS：图片网址http://www.ivank.net/veci/crosshair.png

【讨论】：

【解决方案2】：

好的，这是使用自定义光标的不同方法

// find elements
$(function () {
  $("#testarea").mousemove(function (e) {
    $(".cursor").show().css({
      "left": e.clientX,
      "top": e.clientY
    });
  }).mouseout(function () {
    $(".cursor").hide();
  });
});

#testarea {
  border: 1px dashed #ccc;
  height: 100px;
  cursor: none;
}
.cursor {
  position: absolute;
  width: 25px;
  height: 25px;
  left: -100px;
  cursor: none;
  pointer-events: none;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="testarea"></div>
<img src="https://i.imgur.com/gbSYdYW.png" alt="Cursor" class="cursor" />

【讨论】：

【解决方案3】：

好的，试试这个，对我来说效果很好。

在 css 中的光标实现可以像以下格式一样完成

cursor: url("http://i.imgur.com/vf3qXmT.png"), url("http://i.imgur.com/vf3qXmT.png"), default;

不是这样的：

    cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;

看看下面的代码sn-p。

    
 body {
            width: 999px;
            height: 500px;
cursor: url("http://i.imgur.com/vf3qXmT.png"), url("http://i.imgur.com/vf3qXmT.png"), default;
        }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Custom Cursor</title>
</head>
<body>

</body>
</html>

【讨论】：

你是说这是一个修复？还是说他的代码没有问题？
我是说，可能是 CSS 的问题，如果我可以拥有他的光标图标，我可以尝试让它工作。我认为 OP 代码中的问题是 CSS，然后是图标：|
@DupinderSingh 为此添加了堆栈 sn-p。请检查。
现在看看，运行我的代码 sn-p，看看它是否可以正常工作。 PS：在浏览器窗口中加载图标需要时间，因此有时需要几秒钟才能将箭头图标显示到您的自定义光标图标
这也在 Chromium 和 Mozilla 浏览器中运行。 ?