>我正在尝试使用光标:url添加自定义光标,但它不起作用。我尝试了不同的链接和不同的浏览器(我目前在 Chrome 中(,但它仍然无法正常工作。有人可以帮助我,我是编码和 CSS 的新手。
<head>
<link rel="shortcut icon" href="https://www.stickpng.com/assets/images/58485538b772315a9e4dd5d9.png" />
<title>
Ella's (kinda) First Webpage
</title>
<style>
body {
cursor: url('https://www.stickpng.com/assets/images/58485538b772315a9e4dd5d9.png'), auto;
}
</style>
对光标使用 .png、.cur 或 .gif,并且由于某些浏览器不支持更高的图像,因此不要包含大于 32px 的图像。
示例如下:
html {
height: 100vh;
width: 100vw;
cursor: url('https://reygif.com/media/emoticon-hello-kitty-18039.gif'), auto;
}
<h1>
Ella's (kinda) First Webpage
</h1>
可以用作自定义光标的图像类型存在限制。作为参考,请查看此链接。 我会说你的图像太大了(最大 32x32 像素(。
尝试使用以下代码,其中包含指向 32px 占位符图像的 URL。
body {
height: 100vh;
width: 100vw;
cursor:url(https://via.placeholder.com/32), auto;
}
文件的58485538b772315a9e4dd5d9.png
尺寸太大,请调整其大小。
我已经下载了文件,并用 Photoshop (43px
×34px
( 调整了它的大小,它可以工作!