從「光標一直不顯示」到「終於成功」的核心原因只有一個:圖片尺寸踩坑。
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 美化