自定义光标在 Windows 操作系统上像素化
我已经实现了自定义光标，但它在 Windows Chrome 上看起来像素化（特别是 1366 * 768 分辨率）（没有在 Mac OS 上检查）。你可以在这里看到代码片段：
<!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 图像，但没有成功。任何建议将不胜感激。
请找到相同的堆栈片段：
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>
慕运维80795933回答
-
哈士奇WWW
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工作，但我怀疑它不能与 absolute 一起工作URL，根据我的观察，image-set URL正在与 static 一起工作URI。但我尝试URI用 Absolute改变静态URL，它也很有效。请看一下，这可能对您有更多帮助。PS：图片网址http://www.ivank.net/veci/crosshair.png -
青春有我
好的，这是使用自定义光标的不同方法// 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" /> -
潇湘沐
好的，试试这个，对我来说效果很好。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;看看下面的代码片段。 body { width: 999px; height: 500px;cursor: url("http://i.imgur.com/vf3qXmT.png"), url("http://i.imgur.com/vf3qXmT.png"), default; }<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS Custom Cursor</title></head><body></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript