从「光标一直不显示」到「终于成功」的核心原因只有一个:图片尺寸踩坑。
1. Cursor 不显示的原因:图片尺寸过大#
我一开始用的是 2048×2048 / 512×512 的 PNG,
结果浏览器会 直接忽略 cursor(不会报错,也不会提示)。
光标能正常显示的推荐尺寸:
| 尺寸 | 表现 |
|---|---|
| 32×32 | 最兼容、各浏览器都稳 |
| 48×48 | 清晰、适合作为博主题光标(推荐) |
| >128px | ❌ 浏览器自动丢弃,完全不显示 |
因此第一步就是把图缩放到 32px 或 48px。
建议的 ImageMagick 命令(确保透明背景不丢):
magick input.png -resize 48x48 png32:cursor.png
png32:= 强制保留透明度(不然会变白底)- 不要使用 flatten/extent 等命令,否则透明背景会消失
2. 可以正常使用的图片 URL(推荐)#
即使 raw.githubusercontent 也能显示光标,只要尺寸正确。
但更推荐用 jsDelivr:
https://cdn.jsdelivr.net/gh/<username>/<repo>/<path>/cursor.png
优点:
- 自动返回正确 Content-Type
- 全球 CDN,更快更稳定
- 任何公开 GitHub 仓库都能直接用
示例:
https://cdn.jsdelivr.net/gh/lyzno1/lyzno1/images/cursor-48.png
3. 完整的 xLog Cursor 配置示例#
把以下 CSS 放进 xLog 外链 CSS 或本地 CSS 中:
body {
cursor: url("https://cdn.jsdelivr.net/gh/username/repo/images/cursor-48.png") 10 28, auto !important;
}
参数说明:
url(...):你的 32px 或 48px 透明 PNG10 28:热点坐标(cursor 的 “箭头尖端” 位置)auto !important:覆盖主题默认光标
提示:热点坐标不对会导致光标 “点不准”,根据图片手动调即可。
4. 一句话总结#
- ❗ 几乎所有问题都来自图片尺寸太大
- ❗ 必须使用 32px / 48px,并保持透明背景
- ✔ PNG 放 GitHub,用 jsDelivr 就能稳定当 cursor
- ✔ 透明度丢失和尺寸错误都是浏览器直接忽略的原因
版本:1.0
适用场景:xLog 自定义主题 / Cursor 美化