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 美化

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。