自定义光标在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>

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

看一看。

我不确定Cursorimage-set是如何工作的，但我怀疑它不是与绝对URL一起工作的，根据我的观察，image-setURL与静态URI一起工作。但我尝试用绝对URL更改静态URI，效果也很好。

请看一看，这可能会对你有更多帮助。

PS:图像URLhttp://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 lang="en">
<head>
<meta charset="utf-8">
<title>CSS Custom Cursor</title>
</head>
<body>
</body>
</html>

相关内容

最新更新

热门标签：