你的需求核心是让网格线在任何背景色下都保持高对比度可见，现有代码的问题在于用了固定的灰色，在深色背景下会变得模糊。下面是一个更健壮的实现方案，利用现代CSS特性自动适配背景：

完整CSS代码 #

/* 定义可自定义的CSS变量，方便用户调整网格参数 */
.canvas-grid {
  --grid-line-width: 1px;
  --grid-gap: 20px;
  --grid-opacity: 0.7;
  /* 自动选择与背景对比度最高的颜色（黑/白） */
  --grid-color: color-contrast(background-color vs black, white);
  
  /* 网格背景渐变 - 水平+垂直 */
  background-image: 
    linear-gradient(to right, 
      rgba(from var(--grid-color) r g b, var(--grid-opacity)) var(--grid-line-width), 
      transparent var(--grid-line-width)
    ),
    linear-gradient(to bottom, 
      rgba(from var(--grid-color) r g b, var(--grid-opacity)) var(--grid-line-width), 
      transparent var(--grid-line-width)
    );
  /* 设置网格间距 */
  background-size: var(--grid-gap) var(--grid-gap);
  /* 可选：如果背景是复杂渐变/图案，添加混合模式增强对比度 */
  mix-blend-mode: overlay;
}

关键特性说明 #

• 自适应颜色：color-contrast(background-color vs black, white)会自动检测元素的背景色，选择黑色或白色中对比度更高的那个作为网格线颜色，彻底解决背景色适配问题。
• 可自定义参数：通过CSS变量，用户可以轻松调整网格线的粗细、间距和透明度，不用修改核心渐变代码。
• 现代浏览器兼容：去掉了过时的-webkit-/-moz-前缀，现在所有主流浏览器（Chrome、Firefox、Safari 15.4+、Edge）都支持标准的linear-gradient和color-contrast。
• 混合模式增强：如果画布背景是复杂的渐变、图片或半透明颜色，mix-blend-mode: overlay可以进一步提升网格线的辨识度。

使用示例 #

<!-- 基础浅色背景用法 -->
<div class="canvas-grid" style="background-color: #f0f0f0; width: 500px; height: 500px;"></div>

<!-- 深色背景测试 -->
<div class="canvas-grid" style="background-color: #222; width: 500px; height: 500px;"></div>

<!-- 自定义网格参数 -->
<div class="canvas-grid" style="
  background-color: #ffcc00;
  --grid-line-width: 2px;
  --grid-gap: 30px;
  --grid-opacity: 0.5;
  width: 500px;
  height: 500px;
"></div>

兼容降级方案（针对老浏览器） #

如果需要兼容Safari 15.4以下版本，可以用currentColor结合滤镜反转的方案：

.canvas-grid {
  --grid-line-width: 1px;
  --grid-gap: 20px;
  --grid-opacity: 0.7;
  /* 用文字颜色的反转色作为网格色 */
  color: rgba(0,0,0,var(--grid-opacity));
  filter: invert(1);
  
  background-image: 
    linear-gradient(to right, currentColor var(--grid-line-width), transparent var(--grid-line-width)),
    linear-gradient(to bottom, currentColor var(--grid-line-width), transparent var(--grid-line-width));
  background-size: var(--grid-gap) var(--grid-gap);
}

这种方案需要用户根据背景色手动微调color的透明度，但能覆盖绝大多数旧浏览器。

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