diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue
index 3e80f36b..75c9db26 100644
--- a/src/views/Editor/Canvas/GridLines.vue
+++ b/src/views/Editor/Canvas/GridLines.vue
@@ -30,16 +30,9 @@ export default defineComponent({
 
     // 计算网格线的颜色，避免与背景的颜色太接近
     const gridColor = computed(() => {
-      if (!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)'
-      const color = background.value.color
-      const rgba = tinycolor(color).toRgb()
-      const newRgba = {
-        r: rgba.r > 128 ? rgba.r - 128 : rgba.r + 127,
-        g: rgba.g > 128 ? rgba.g - 128 : rgba.g + 127,
-        b: rgba.b > 128 ? rgba.b - 128 : rgba.b + 127,
-        a: 0.5
-      }
-      return `rgba(${[newRgba.r, newRgba.g, newRgba.b, newRgba.a].join(',')})`
+      const bgColor = background.value?.color || '#fff'
+      const colorList = ['#000', '#fff']
+      return tinycolor.mostReadable(bgColor, colorList, { includeFallbackColors: true }).setAlpha(.5).toRgbString()
     })
 
     const gridSize = 50
@@ -80,5 +73,7 @@ export default defineComponent({
   bottom: 0;
   right: 0;
   overflow: visible;
+  z-index: 999;
+  pointer-events: none;
 }
 </style>
\ No newline at end of file