diff --git a/src/components/SideDrawer.spec.ts b/src/components/SideDrawer.spec.ts
index 64baf4c..284db67 100644
--- a/src/components/SideDrawer.spec.ts
+++ b/src/components/SideDrawer.spec.ts
@@ -90,6 +90,36 @@ describe('SideDrawer 关闭方式', () => {
   })
 })
 
+/**
+ * 遮罩既要压暗又要让底下的页面看得见：全不透明会把看板盖成一片灰，
+ * 所以这里把「半透明 + 模糊」固定下来，避免以后又被调回不透明。
+ */
+describe('SideDrawer 遮罩观感', () => {
+  const backdropOf = (wrapper: ReturnType<typeof mountDrawer>) =>
+    wrapper.find('.absolute.inset-0')
+
+  it('遮罩是半透明的，能透出底下的页面', () => {
+    const classes = backdropOf(mountDrawer({ open: true })).classes()
+    expect(classes).toContain('bg-slate-900/25')
+    expect(classes).toContain('dark:bg-black/40')
+  })
+
+  it('遮罩带背景模糊', () => {
+    expect(backdropOf(mountDrawer({ open: true })).classes()).toContain('backdrop-blur-sm')
+  })
+
+  it('遮罩铺满整个视口并位于面板之下', () => {
+    const wrapper = mountDrawer({ open: true })
+    const backdrop = backdropOf(wrapper)
+    expect(backdrop.classes()).toContain('absolute')
+    expect(backdrop.classes()).toContain('inset-0')
+    // 面板在遮罩之后出现，因此绘制在遮罩之上
+    expect(
+      (backdrop.element.compareDocumentPosition(wrapper.find('aside').element) & 4) === 4,
+    ).toBe(true)
+  })
+})
+
 describe('SideDrawer 焦点管理', () => {
   it('打开后焦点移入面板内的第一个可聚焦元素', async () => {
     mountDrawer({ open: true })
diff --git a/src/components/SideDrawer.vue b/src/components/SideDrawer.vue
index eaff791..e3aa972 100644
--- a/src/components/SideDrawer.vue
+++ b/src/components/SideDrawer.vue
@@ -85,7 +85,14 @@ onBeforeUnmount(stopListening)
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-40">
-      <div class="absolute inset-0 bg-slate-900/40 dark:bg-black/60" @click="emit('close')" />
+      <!--
+        遮罩：压暗 + 轻微模糊。刻意压得比较轻，让底下的看板仍然看得见轮廓，
+        只把注意力让给抽屉；模糊负责把背景「推远」，避免和面板内容抢焦点。
+      -->
+      <div
+        class="absolute inset-0 bg-slate-900/25 backdrop-blur-sm dark:bg-black/40"
+        @click="emit('close')"
+      />
 
       <aside
         ref="panelRef"