内部CSS光标URL不起作用,有什么提示吗?



>我正在尝试使用光标: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( 调整了它的大小,它可以工作!

最新更新