banner
yyh

Hi, I'm yyh

github
x
email

為 xLog 配置自定義 Cursor:踩坑速記

從「光標一直不顯示」到「終於成功」的核心原因只有一個:圖片尺寸踩坑


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 透明 PNG
  • 10 28:熱點坐標(cursor 的 “箭頭尖端” 位置)
  • auto !important:覆蓋主題默認光標

提示:熱點坐標不對會導致光標 “點不準”,根據圖片手動調即可。


4. 一句話總結#

  • 幾乎所有問題都來自圖片尺寸太大
  • ❗ 必須使用 32px / 48px,並保持透明背景
  • ✔ PNG 放 GitHub,用 jsDelivr 就能穩定當 cursor
  • ✔ 透明度丟失和尺寸錯誤都是瀏覽器直接忽略的原因

版本:1.0
適用場景:xLog 自定義主題 / Cursor 美化

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。