diff --git a/src/_common b/src/_common
index 4786527ee..74a2dc7bc 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 4786527eead757ae607aefdbd4587b6551433cb3
+Subproject commit 74a2dc7bc26804e8f3ff197a512c19fc387e51a4
diff --git a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
index 20dd6ed98..581b61d79 100644
--- a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
@@ -40,6 +40,7 @@ exports[`ActionSheet > ActionSheet gridMultipleVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -1164,6 +1165,7 @@ exports[`ActionSheet > ActionSheet gridVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -1768,6 +1770,7 @@ exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -1938,6 +1941,7 @@ exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -2069,6 +2073,7 @@ exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -2666,6 +2671,7 @@ exports[`ActionSheet > ActionSheet mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
index 0eea499a4..3ccd72997 100644
--- a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
@@ -18,6 +18,7 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = `
           css="true"
           name="t-overlay"
           persisted="true"
+          transparent="false"
         >
           <div
             class="t-overlay"
@@ -2408,6 +2409,7 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
           css="true"
           name="t-overlay"
           persisted="true"
+          transparent="false"
         >
           <div
             class="t-overlay"
@@ -4799,6 +4801,7 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
           css="true"
           name="t-overlay"
           persisted="true"
+          transparent="false"
         >
           <div
             class="t-overlay"
@@ -5302,6 +5305,7 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
           css="true"
           name="t-overlay"
           persisted="true"
+          transparent="false"
         >
           <div
             class="t-overlay"
@@ -6388,6 +6392,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
                   css="true"
                   name="t-overlay"
                   persisted="true"
+                  transparent="false"
                 >
                   <div
                     class="t-overlay"
@@ -8772,6 +8777,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
                   css="true"
                   name="t-overlay"
                   persisted="true"
+                  transparent="false"
                 >
                   <div
                     class="t-overlay"
@@ -11156,6 +11162,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
                   css="true"
                   name="t-overlay"
                   persisted="true"
+                  transparent="false"
                 >
                   <div
                     class="t-overlay"
@@ -13565,6 +13572,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -14610,6 +14618,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -16994,6 +17003,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -17514,6 +17524,7 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
           css="true"
           name="t-overlay"
           persisted="true"
+          transparent="false"
         >
           <div
             class="t-overlay"
@@ -19901,6 +19912,7 @@ exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
           css="true"
           name="t-overlay"
           persisted="true"
+          transparent="false"
         >
           <div
             class="t-overlay"
diff --git a/src/calendar/__test__/__snapshots__/index.test.jsx.snap b/src/calendar/__test__/__snapshots__/index.test.jsx.snap
index 616dc2425..1fd5830d9 100644
--- a/src/calendar/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.jsx.snap
@@ -17,6 +17,7 @@ exports[`calendar > props > : format 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay t-overlay--active"
diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index 8fcb58745..cd25578c7 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -63,6 +63,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -321,6 +322,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -610,6 +612,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -881,6 +884,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -1126,6 +1130,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -1397,6 +1402,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -1668,6 +1674,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -1933,6 +1940,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -2161,6 +2169,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -2423,6 +2432,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index 0abb60eef..677066982 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -43,6 +43,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -502,6 +503,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -896,6 +898,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -2149,6 +2152,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -2601,6 +2605,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -2897,6 +2902,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -3472,6 +3478,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -3869,6 +3876,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -4427,6 +4435,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
index 213bccc65..607afebd3 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
@@ -50,6 +50,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -151,6 +152,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -318,6 +320,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -400,6 +403,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -482,6 +486,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -572,6 +577,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -701,6 +707,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -772,6 +779,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -956,6 +964,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -1038,6 +1047,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -1120,6 +1130,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -1210,6 +1221,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -1358,6 +1370,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -1459,6 +1472,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -1619,6 +1633,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -1690,6 +1705,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
diff --git a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
index 2bed67cd7..9fab1a236 100644
--- a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
@@ -20,6 +20,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -155,6 +156,7 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -420,6 +422,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -572,6 +575,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index 5e7c2ab5f..ad5514d0f 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -382,6 +382,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                 css="true"
                 name="t-overlay"
                 persisted="true"
+                transparent="false"
               >
                 <div
                   class="t-overlay"
@@ -727,6 +728,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                 css="true"
                 name="t-overlay"
                 persisted="true"
+                transparent="false"
               >
                 <div
                   class="t-overlay"
@@ -2189,6 +2191,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                       css="true"
                       name="t-overlay"
                       persisted="true"
+                      transparent="false"
                     >
                       <div
                         class="t-overlay"
@@ -2534,6 +2537,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                       css="true"
                       name="t-overlay"
                       persisted="true"
+                      transparent="false"
                     >
                       <div
                         class="t-overlay"
@@ -3870,6 +3874,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                 css="true"
                 name="t-overlay"
                 persisted="true"
+                transparent="false"
               >
                 <div
                   class="t-overlay"
@@ -4214,6 +4219,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                 css="true"
                 name="t-overlay"
                 persisted="true"
+                transparent="false"
               >
                 <div
                   class="t-overlay"
diff --git a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
index 3f4a1094a..0821e9621 100644
--- a/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/image-viewer/__test__/__snapshots__/demo.test.jsx.snap
@@ -44,7 +44,6 @@ exports[`ImageViewer > ImageViewer backgroundVue demo works fine 1`] = `
         </button>
         <transition-stub
           appear="false"
-          background-color="rgba(0, 0, 0, 1)"
           class="t-image-viewer"
           css="true"
           name="t-overlay"
@@ -52,7 +51,7 @@ exports[`ImageViewer > ImageViewer backgroundVue demo works fine 1`] = `
         >
           <div
             class="t-overlay"
-            style="z-index: 1000; transition-duration: 300ms; display: none;"
+            style="z-index: 1000; transition-duration: 300ms; background-color: rgb(0, 0, 0); display: none;"
           >
             
             
diff --git a/src/overlay/__test__/__snapshots__/demo.test.jsx.snap b/src/overlay/__test__/__snapshots__/demo.test.jsx.snap
index 4b6e78017..a3f8ec3c1 100644
--- a/src/overlay/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/overlay/__test__/__snapshots__/demo.test.jsx.snap
@@ -8,7 +8,6 @@ exports[`Overlay > Overlay baseVue demo works fine 1`] = `
   <button
     aria-disabled="false"
     class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-    data-v-255855c8=""
     role="button"
   >
     <!---->
@@ -16,29 +15,13 @@ exports[`Overlay > Overlay baseVue demo works fine 1`] = `
       class="t-button__text"
     >
       
-      基础遮罩
-      
-    </span>
-  </button>
-  <button
-    aria-disabled="false"
-    class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-    data-v-255855c8=""
-    role="button"
-  >
-    <!---->
-    <span
-      class="t-button__text"
-    >
-      
-      内嵌内容的遮罩
+      基础用法
       
     </span>
   </button>
   <transition-stub
     appear="false"
     css="true"
-    data-v-255855c8=""
     name="t-overlay"
     persisted="true"
   >
@@ -48,25 +31,6 @@ exports[`Overlay > Overlay baseVue demo works fine 1`] = `
     >
       
       
-    </div>
-  </transition-stub>
-  <transition-stub
-    appear="false"
-    css="true"
-    data-v-255855c8=""
-    name="t-overlay"
-    persisted="true"
-  >
-    <div
-      class="t-overlay t-overlay--transparent"
-      style="z-index: 1000; transition-duration: 300ms; display: none;"
-    >
-      
-      <div
-        class="box"
-        data-v-255855c8=""
-      />
-      
     </div>
   </transition-stub>
   
@@ -96,7 +60,7 @@ exports[`Overlay > Overlay mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        01 类型
+        01 组件类型
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
@@ -115,7 +79,6 @@ exports[`Overlay > Overlay mobileVue demo works fine 1`] = `
         <button
           aria-disabled="false"
           class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-          data-v-255855c8=""
           role="button"
         >
           <!---->
@@ -123,29 +86,13 @@ exports[`Overlay > Overlay mobileVue demo works fine 1`] = `
             class="t-button__text"
           >
             
-            基础遮罩
-            
-          </span>
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-size-l t-button--outline t-button--default t-button--shape-rectangle t-is-block"
-          data-v-255855c8=""
-          role="button"
-        >
-          <!---->
-          <span
-            class="t-button__text"
-          >
-            
-            内嵌内容的遮罩
+            基础用法
             
           </span>
         </button>
         <transition-stub
           appear="false"
           css="true"
-          data-v-255855c8=""
           name="t-overlay"
           persisted="true"
         >
@@ -155,25 +102,6 @@ exports[`Overlay > Overlay mobileVue demo works fine 1`] = `
           >
             
             
-          </div>
-        </transition-stub>
-        <transition-stub
-          appear="false"
-          css="true"
-          data-v-255855c8=""
-          name="t-overlay"
-          persisted="true"
-        >
-          <div
-            class="t-overlay t-overlay--transparent"
-            style="z-index: 1000; transition-duration: 300ms; display: none;"
-          >
-            
-            <div
-              class="box"
-              data-v-255855c8=""
-            />
-            
           </div>
         </transition-stub>
         
diff --git a/src/overlay/__test__/index.test.jsx b/src/overlay/__test__/index.test.jsx
index a63f7c5ee..d85333245 100644
--- a/src/overlay/__test__/index.test.jsx
+++ b/src/overlay/__test__/index.test.jsx
@@ -33,19 +33,6 @@ describe('Overlay', () => {
       expect(event.stopPropagation).toHaveBeenCalledTimes(1);
     });
 
-    it(': transparent', async () => {
-      const wrapper = mount(Overlay, {
-        props: {
-          visible: true,
-        },
-      });
-      expect(wrapper.find('.t-overlay--transparent').exists()).toEqual(false);
-      await wrapper.setProps({
-        transparent: true,
-      });
-      expect(wrapper.find('.t-overlay--transparent').exists()).toEqual(true);
-    });
-
     it(': duration', async () => {
       const wrapper = mount(Overlay, {
         props: {
diff --git a/src/overlay/demos/base.vue b/src/overlay/demos/base.vue
index 89e67691e..d4fe35269 100644
--- a/src/overlay/demos/base.vue
+++ b/src/overlay/demos/base.vue
@@ -1,28 +1,10 @@
 <template>
-  <t-button size="large" block variant="outline" @click="overlayVisible1 = true">基础遮罩</t-button>
-  <t-button size="large" block variant="outline" @click="overlayVisible2 = true">内嵌内容的遮罩</t-button>
-  <t-overlay :visible="overlayVisible1" @click="overlayVisible1 = false" />
-  <t-overlay :visible="overlayVisible2" transparent @click="overlayVisible2 = false">
-    <div class="box"></div>
-  </t-overlay>
+  <t-button size="large" block variant="outline" @click="visible = true">基础用法</t-button>
+  <t-overlay :visible="visible" @click="visible = false" />
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const overlayVisible1 = ref(false);
-const overlayVisible2 = ref(false);
+const visible = ref(false);
 </script>
-
-<style lang="less" scoped>
-.box {
-  width: 100px;
-  height: 100px;
-  border-radius: 4px;
-  background-color: red;
-  position: relative;
-  left: 50%;
-  top: 100px;
-  margin-left: -50px;
-}
-</style>
diff --git a/src/overlay/demos/mobile.vue b/src/overlay/demos/mobile.vue
index 0cfbfbd4c..e039e7de8 100644
--- a/src/overlay/demos/mobile.vue
+++ b/src/overlay/demos/mobile.vue
@@ -2,7 +2,7 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Overlay 遮罩层</h1>
     <p class="summary">通过遮罩层，可以强调部分内容</p>
-    <tdesign-demo-block title="01 类型" summary="基础遮罩层">
+    <tdesign-demo-block title="01 组件类型" summary="基础遮罩层">
       <div class="demo-block">
         <BaseDemo />
       </div>
diff --git a/src/overlay/overlay.en-US.md b/src/overlay/overlay.en-US.md
new file mode 100644
index 000000000..39f5e33ff
--- /dev/null
+++ b/src/overlay/overlay.en-US.md
@@ -0,0 +1,20 @@
+:: BASE_DOC ::
+
+## API
+### Overlay Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+backgroundColor | String | - | \- | N
+customStyle | String | - | \- | N
+duration | Number | 300 | \- | N
+preventScrollThrough | Boolean | true | \- | N
+visible | Boolean | false | \- | N
+zIndex | Number | 1000 | \- | N
+onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+
+### Overlay Events
+
+name | params | description
+-- | -- | --
+click | `(context: { e: MouseEvent })` | \-
diff --git a/src/overlay/overlay.md b/src/overlay/overlay.md
index e72390b7e..c45a218d3 100644
--- a/src/overlay/overlay.md
+++ b/src/overlay/overlay.md
@@ -5,12 +5,12 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-duration | Number | 300 | 动画时长，单位毫秒 | N
-preventScrollThrough | Boolean | true | 防止滚动穿透 | N
-transparent | Boolean | false | 遮罩层是否透明 | N
-visible | Boolean | true | 必需。是否展示 | Y
+backgroundColor | String | - | 遮罩层的背景色	 | N
+customStyle | String | - | 遮罩层自定义样式。优先级低于其他属性 | N
+duration | Number | 300 | 背景色过渡时间，单位毫秒 | N
+preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
+visible | Boolean | false | 是否展示 | N
 zIndex | Number | 1000 | 遮罩的层级 | N
-customStyle | String | '' | 弹出层的自定义样式 | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>遮罩层的点击事件 | N
 
 ### Overlay Events
diff --git a/src/overlay/overlay.vue b/src/overlay/overlay.vue
index f75c51ffe..15b4347d9 100644
--- a/src/overlay/overlay.vue
+++ b/src/overlay/overlay.vue
@@ -21,16 +21,25 @@ export default defineComponent({
     const classes = computed(() => ({
       [`${name}`]: true,
       [`${name}--active`]: props.visible,
-      [`${name}--transparent`]: props.transparent,
     }));
 
-    const rootStyles = computed(() =>
-      props.customStyle || props.zIndex || props.duration
-        ? (props.customStyle && `${props.customStyle};`) +
-          (props.zIndex && `z-index:${props.zIndex};`) +
-          (props.duration && `transition-duration:${props.duration}ms;`)
-        : undefined,
-    );
+    const rootStyles = computed(() => {
+      const arr = [];
+
+      if (props.customStyle) {
+        arr.push(props.customStyle);
+      }
+      if (props.zIndex) {
+        arr.push(`z-index: ${props.zIndex}`);
+      }
+      if (props.duration) {
+        arr.push(`transition-duration: ${props.duration}ms`);
+      }
+      if (props.backgroundColor) {
+        arr.push(`background-color: ${props.backgroundColor}`);
+      }
+      return arr.join('; ');
+    });
 
     const handleTouchMove = (e: TouchEvent) => {
       if (props.preventScrollThrough) {
diff --git a/src/overlay/props.ts b/src/overlay/props.ts
index 826be00f6..410481257 100644
--- a/src/overlay/props.ts
+++ b/src/overlay/props.ts
@@ -8,34 +8,33 @@ import { TdOverlayProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 动画时长，单位毫秒 */
+  /** 遮罩层的背景色	 */
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  /** 遮罩层自定义样式。优先级低于其他属性 */
+  customStyle: {
+    type: String,
+    default: '',
+  },
+  /** 背景色过渡时间，单位毫秒 */
   duration: {
     type: Number,
     default: 300,
   },
-  /** 防止滚动穿透 */
+  /** 防止滚动穿透，即不允许点击和滚动 */
   preventScrollThrough: {
     type: Boolean,
     default: true,
   },
-  /** 遮罩层是否透明 */
-  transparent: Boolean,
   /** 是否展示 */
-  visible: {
-    type: Boolean,
-    default: true,
-    required: true,
-  },
+  visible: Boolean,
   /** 遮罩的层级 */
   zIndex: {
     type: Number,
     default: 1000,
   },
-  /** 遮罩的自定义样式 */
-  customStyle: {
-    type: String,
-    default: '',
-  },
   /** 遮罩层的点击事件 */
   onClick: Function as PropType<TdOverlayProps['onClick']>,
 };
diff --git a/src/overlay/type.ts b/src/overlay/type.ts
index 7e5eb5f4e..809f61c1a 100644
--- a/src/overlay/type.ts
+++ b/src/overlay/type.ts
@@ -6,35 +6,35 @@
 
 export interface TdOverlayProps {
   /**
-   * 动画时长，单位毫秒
+   * 遮罩层的背景色
+   * @default ''
+   */
+  backgroundColor?: string;
+  /**
+   * 遮罩层自定义样式。优先级低于其他属性
+   * @default ''
+   */
+  customStyle?: string;
+  /**
+   * 背景色过渡时间，单位毫秒
    * @default 300
    */
   duration?: number;
   /**
-   * 防止滚动穿透
+   * 防止滚动穿透，即不允许点击和滚动
    * @default true
    */
   preventScrollThrough?: boolean;
-  /**
-   * 遮罩层是否透明
-   * @default false
-   */
-  transparent?: boolean;
   /**
    * 是否展示
-   * @default true
+   * @default false
    */
-  visible: boolean;
+  visible?: boolean;
   /**
    * 遮罩的层级
    * @default 1000
    */
   zIndex?: number;
-  /**
-   * 遮罩的自定义样式
-   * @default ''
-   */
-  customStyle?: string;
   /**
    * 遮罩层的点击事件
    */
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index 17b59ece2..241917325 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -59,6 +59,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -269,6 +270,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -394,6 +396,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -625,6 +628,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -877,6 +881,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -1002,6 +1007,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -1214,6 +1220,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -1438,6 +1445,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
             css="true"
             name="t-overlay"
             persisted="true"
+            transparent="false"
           >
             <div
               class="t-overlay"
@@ -1640,6 +1648,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
diff --git a/src/popup/__test__/__snapshots__/demo.test.jsx.snap b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
index a24e2f31e..e08cc3ef0 100644
--- a/src/popup/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
@@ -37,6 +37,7 @@ exports[`Popup > Popup customAnimationVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -140,6 +141,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -206,6 +208,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -272,6 +275,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -338,6 +342,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -404,6 +409,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -470,6 +476,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
               css="true"
               name="t-overlay"
               persisted="true"
+              transparent="false"
             >
               <div
                 class="t-overlay"
@@ -543,6 +550,7 @@ exports[`Popup > Popup placementBottomVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -612,6 +620,7 @@ exports[`Popup > Popup placementCenterVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -681,6 +690,7 @@ exports[`Popup > Popup placementLeftVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -750,6 +760,7 @@ exports[`Popup > Popup placementRightVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
@@ -819,6 +830,7 @@ exports[`Popup > Popup placementTopVue demo works fine 1`] = `
         css="true"
         name="t-overlay"
         persisted="true"
+        transparent="false"
       >
         <div
           class="t-overlay"
diff --git a/src/popup/__test__/index.test.jsx b/src/popup/__test__/index.test.jsx
index 7a8e4222b..0cd8453c4 100644
--- a/src/popup/__test__/index.test.jsx
+++ b/src/popup/__test__/index.test.jsx
@@ -38,19 +38,6 @@ describe('popup', () => {
       expect(wrapper.find('.t-popup--content').classes()).toContain(`t-popup--content-${wrapper.vm.placement}`);
     });
 
-    it(': showOverlay	', async () => {
-      const wrapper = mount(Popup, {
-        props: {
-          showOverlay: false,
-        },
-      });
-      expect(wrapper.find('.t-overlay').classes('t-overlay--transparent')).toBe(true);
-      await wrapper.setProps({
-        showOverlay: true,
-      });
-      expect(wrapper.find('.t-overlay').classes('t-overlay--transparent')).toBe(false);
-    });
-
     it(': zIndex', async () => {
       const wrapper = mount(Popup, {
         props: {
diff --git a/src/toast/demos/overlay.vue b/src/toast/demos/overlay.vue
index 5993f6dc8..a449d4e4e 100644
--- a/src/toast/demos/overlay.vue
+++ b/src/toast/demos/overlay.vue
@@ -14,7 +14,7 @@ const showOverlayProps = () => {
     theme: 'loading',
     message: '加载中...',
     showOverlay: true,
-    overlayProps: { transparent: true, visible: true },
+    overlayProps: { backgroundColor: 'transparent', visible: true },
     preventScrollThrough: false,
   });
 };