自定义白色透明背景光标图片为何显示灰色？

问题原因 #

你看到的淡灰色是浏览器/操作系统为自定义光标自动添加的可读性轮廓。为了避免光标与背景色过于接近导致无法识别，浏览器会给所有自定义光标图片自动加上一层细微的灰色阴影或描边——哪怕你的图片是白色透明背景也不例外。这就是为什么在白色区块上，原本应该“消失”的光标反而呈现出淡灰色。

解决方法 #

方法1：使用SVG光标（推荐） #

用SVG格式制作光标，明确设置填充色为半透明白色且无描边，能绕过浏览器的自动轮廓添加机制。示例SVG代码如下：

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <rect width="40" height="40" fill="rgba(255,255,255,0.5)" stroke="none" />
</svg>

将这段代码保存为.svg文件后，在CSS中引用：

.block {
  height: 200px;
  width: 400px;
  cursor: url('your-custom-cursor.svg'), auto;
}

方法2：优化PNG图片（效果有限） #

如果坚持使用PNG，可以将图片的白色调至纯#FFFFFF，同时适当降低透明度，让浏览器添加的灰色轮廓尽可能不明显。但这种方法无法完全消除轮廓，仅作为临时方案。

方法3：CSS+JS模拟光标（完全可控） #

隐藏默认光标，用一个跟随鼠标的元素模拟自定义光标，完全由你控制样式，不会出现浏览器自动添加的轮廓：

CSS

.block {
  height: 200px;
  width: 400px;
  cursor: none;
  position: relative;
  overflow: hidden;
}

.cursor-mock {
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.5);
  pointer-events: none;
  display: none;
}

.block:hover .cursor-mock {
  display: block;
}

HTML

<div class="block red">
  <div class="cursor-mock"></div>
</div>
<div class="block white">
  <div class="cursor-mock"></div>
</div>

JavaScript

document.querySelectorAll('.block').forEach(block => {
  const cursor = block.querySelector('.cursor-mock');
  block.addEventListener('mousemove', e => {
    // 让光标中心对齐鼠标位置
    cursor.style.left = `${e.offsetX - 20}px`;
    cursor.style.top = `${e.offsetY - 20}px`;
  });
});

原示例代码 #

CSS

.block {
  height: 200px;
  width: 400px;
  cursor: url('https://i.imgur.com/yuDNHeN.png'), auto;
}

.red {
  background: red;
}

.white {
  border: 1px solid black;
  background: white;
}

HTML

<div class="block red"></div>
<div class="block white"></div>

内容的提问来源于stack exchange，提问作者Paran0a