CSS中crosshair十字光标的颜色如何定义？为何在#7F7F7F背景下不可见

问题表现 #

• 当背景色bg_color取值为#7F7F7F时，Chromium内核浏览器默认的crosshair十字光标采用「白色减去背景色」的反色计算逻辑，最终算出的光标颜色为#808080，和背景色完全一致，直接导致光标在该背景区域完全看不见。
• 这个问题已经在Chrome、Edge浏览器中测试确认可以稳定复现。
• 此前已有其他用户反馈过相同问题，表现为十字光标在特定背景下变透明、无法识别。

现有规则说明 #

查阅CSS标准中关于crosshair光标的定义，目前标准并没有对这个光标的颜色计算规则作出明确要求，具体渲染逻辑完全由各浏览器厂商自行实现。
你提到的采用(bg_color + 128) % 256的逻辑计算光标颜色，确实能从算法层面彻底避免光标和背景同色的问题，但这属于浏览器内核层面的渲染逻辑修改，普通前端开发者没法直接改动原生crosshair光标的实现。

问题复现代码 #

div {
  cursor: crosshair;
  height: 90px;
  width: 360px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div style="background-color: #7F7F7F;">Cursor is invisible on this area.</div>
<div style="background-color: #FF0000;">Cursor is visible on this area.</div>

前端侧临时规避方案 #

如果业务中需要避开这个问题，可以不用原生crosshair光标，改用自定义光标：制作带双色描边的十字光标资源，十字主体和外层描边采用黑白高反差配色，不管背景是什么颜色，都能保证至少有一层颜色和背景形成足够对比度，不会出现完全不可见的情况。

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