diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index c5915d7e9..62d1bde0e 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -795,7 +795,7 @@ exports[`calendar :base 1`] = `
           ariaLabel="关闭"
           ariaRole="button"
           class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="z-index:11000;"
+          style="--td-overlay-transition-duration:300ms; z-index:11000;"
           bind:tap="handleClick"
           catch:touchmove="noop"
           bind:transitionend="onTransitionEnd"
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
index f4e389bf4..85ae4c782 100644
--- a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
@@ -459,7 +459,7 @@ exports[`date-time-picker :base 1`] = `
             ariaLabel="关闭"
             ariaRole="button"
             class="t-overlay t-fade-enter t-fade-enter-active class"
-            style="z-index:11000;"
+            style="--td-overlay-transition-duration:300ms; z-index:11000;"
             bind:tap="handleClick"
             catch:touchmove="noop"
             bind:transitionend="onTransitionEnd"
diff --git a/src/dialog/__test__/__snapshots__/index.test.js.snap b/src/dialog/__test__/__snapshots__/index.test.js.snap
index d2c4f0a22..44d4bad1b 100644
--- a/src/dialog/__test__/__snapshots__/index.test.js.snap
+++ b/src/dialog/__test__/__snapshots__/index.test.js.snap
@@ -43,7 +43,7 @@ exports[`dialog :base 1`] = `
           ariaLabel="关闭"
           ariaRole="button"
           class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="z-index:11000;"
+          style="--td-overlay-transition-duration:300ms; z-index:11000;"
           bind:tap="handleClick"
           catch:touchmove="noop"
           bind:transitionend="onTransitionEnd"
diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index 9cb51c631..e7106cb1b 100644
--- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -620,7 +620,7 @@ exports[`dropdown-menu :base 1`] = `
                 ariaLabel="关闭"
                 ariaRole="button"
                 class="t-overlay t-fade-enter-active t-fade-enter-to class"
-                style="z-index:11000; position: absolute;"
+                style="--td-overlay-transition-duration:300ms; z-index:11000; position: absolute;"
                 bind:tap="handleClick"
                 catch:touchmove="noop"
                 bind:transitionend="onTransitionEnd"
diff --git a/src/overlay/README.md b/src/overlay/README.md
index bfc25d310..958df5ded 100644
--- a/src/overlay/README.md
+++ b/src/overlay/README.md
@@ -38,7 +38,7 @@ isComponent: true
 -- | -- | -- | -- | --
 visible | Boolean | false | 是否展示 | N
 zIndex | Number | 11000 | 遮罩层及 | N
-duration | Number | 300 | (暂不支持)背景色过渡时间，单位毫秒 | N
+duration | Number | 300 | 背景色过渡时间，单位毫秒 | N
 backgroundColor | String | - | 遮罩层的背景色 | N
 preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
 
diff --git a/src/overlay/__test__/__snapshots__/demo.test.js.snap b/src/overlay/__test__/__snapshots__/demo.test.js.snap
index d8af8fe83..e522d69b7 100644
--- a/src/overlay/__test__/__snapshots__/demo.test.js.snap
+++ b/src/overlay/__test__/__snapshots__/demo.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Overlay Overlay base demo works fine 1`] = `
 <base>
   <t-overlay
+    duration="{{500}}"
     visible="{{false}}"
     bind:click="handleOverlayClick"
   />
diff --git a/src/overlay/__test__/__snapshots__/index.test.js.snap b/src/overlay/__test__/__snapshots__/index.test.js.snap
index 7a06bb8be..773e5e671 100644
--- a/src/overlay/__test__/__snapshots__/index.test.js.snap
+++ b/src/overlay/__test__/__snapshots__/index.test.js.snap
@@ -7,7 +7,7 @@ exports[`overlay :base 1`] = `
       ariaLabel="关闭"
       ariaRole="button"
       class="t-overlay t-fade-enter t-fade-enter-active class"
-      style="z-index:11000;"
+      style="--td-overlay-transition-duration:300ms; z-index:11000;"
       bind:tap="handleClick"
       catch:touchmove="noop"
       bind:transitionend="onTransitionEnd"
diff --git a/src/overlay/_example/base/index.wxml b/src/overlay/_example/base/index.wxml
index 745f89467..b28795dcc 100644
--- a/src/overlay/_example/base/index.wxml
+++ b/src/overlay/_example/base/index.wxml
@@ -1,3 +1,3 @@
-<t-overlay visible="{{visible}}" bind:click="handleOverlayClick" />
+<t-overlay visible="{{visible}}" duration="{{500}}" bind:click="handleOverlayClick" />
 
 <t-button block size="large" theme="primary" variant="outline" bind:tap="handleClick">基础用法</t-button>
diff --git a/src/overlay/overlay.wxml b/src/overlay/overlay.wxml
index 55750dd46..26a2232c3 100644
--- a/src/overlay/overlay.wxml
+++ b/src/overlay/overlay.wxml
@@ -3,7 +3,7 @@
 <view
   wx:if="{{realVisible && preventScrollThrough}}"
   class="{{prefix}}-overlay {{transitionClass}} class"
-  style="{{_._style(['z-index:' + _zIndex, computedStyle, style, customStyle])}}"
+  style="{{_._style(['--td-overlay-transition-duration:' + duration + 'ms', 'z-index:' + _zIndex, computedStyle, style, customStyle])}}"
   bind:tap="handleClick"
   catchtouchmove="noop"
   bind:transitionend="onTransitionEnd"
diff --git a/src/picker/__test__/__snapshots__/index.test.js.snap b/src/picker/__test__/__snapshots__/index.test.js.snap
index 5701a24a3..3db69f84a 100644
--- a/src/picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/picker/__test__/__snapshots__/index.test.js.snap
@@ -162,7 +162,7 @@ exports[`picker :base 1`] = `
         ariaLabel="关闭"
         ariaRole="button"
         class="t-overlay t-fade-enter t-fade-enter-active class"
-        style="z-index:11000;"
+        style="--td-overlay-transition-duration:300ms; z-index:11000;"
         bind:tap="handleClick"
         catch:touchmove="noop"
         bind:transitionend="onTransitionEnd"