diff --git a/packages/vant/src/watermark/README.md b/packages/vant/src/watermark/README.md
index 0ac025ed3..375ed851a 100644
--- a/packages/vant/src/watermark/README.md
+++ b/packages/vant/src/watermark/README.md
@@ -18,66 +18,65 @@ app.use(Watermark);
 
 ## Usage
 
-### Basic Usage
+### Text Watermark
+
+Use the `content` prop to set the text of the watermark.
 
 ```html
-<!-- text watermark -->
 <van-watermark content="Vant" />
+```
 
-<!-- image watermark -->
-<van-watermark image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+### Image Watermark
+
+Use the `image` prop to set the watermark image, and use `opacity` prop to adjust the transparency of the watermark.
+
+```html
+<van-watermark
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+  :opacity="0.2"
+/>
 ```
 
 ### Custom Gap
 
-Use `gapX` `gapY` attributes to control the gap between two watermark slice.
+Use `gap-x` `gap-y` prop to control the gap between watermark items.
 
 ```html
 <van-watermark
-  image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-  :gap-x="20"
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+  :gap-x="30"
   :gap-y="10"
-/>
-```
-
-### Custom Opacity
-
-Use `opacity` attribute to control the entirety opacity.
-
-```html
-<van-watermark
-  image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-  :opacity="0.5"
+  :opacity="0.2"
 />
 ```
 
 ### Custom Rotate
 
-Use `rotate` attribute to control the rotate of watermark. Default value is `-22`.
+Use `rotate` prop to control the rotate of watermark. The default value is `-22`.
 
 ```html
 <van-watermark
-  image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
   rotate="22"
+  :opacity="0.2"
 />
 ```
 
 ### Display Range
 
-Use the `fullPage` attribute to control the display range of the watermark.
+Use the `full-page` prop to control the display range of the watermark.
 
 ```html
 <van-watermark
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+  :opacity="0.2"
   :full-page="true"
-  content="vant watermark"
-  font-color="rgba(0, 0, 0, 0.15)"
->
-</van-watermark>
+/>
 ```
 
 ### HTML Watermark
 
-Use the `default slot` to pass HTML directly. Inline styles are supported, and self-closing tags are not supported.
+Use the `default` slot to pass HTML directly. Inline styles are supported, and self-closing tags are not supported.
 
 ```html
 <van-watermark :width="150">
diff --git a/packages/vant/src/watermark/README.zh-CN.md b/packages/vant/src/watermark/README.zh-CN.md
index 93f3a0ab7..ee8e5b284 100644
--- a/packages/vant/src/watermark/README.zh-CN.md
+++ b/packages/vant/src/watermark/README.zh-CN.md
@@ -18,36 +18,35 @@ app.use(Watermark);
 
 ## 代码演示
 
-### 基础用法
+### 文字水印
+
+通过 `content` 属性来设置水印的文字。
 
 ```html
-<!-- 文字水印 -->
 <van-watermark content="Vant" />
+```
 
-<!-- 图片水印 -->
-<van-watermark image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+### 图片水印
+
+通过 `image` 属性来设置水印图片，并使用 `opacity` 来调整水印的整体透明度。
+
+```html
+<van-watermark
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+  :opacity="0.2"
+/>
 ```
 
 ### 自定义间隔
 
-通过 `gapX` 和 `gapY` 属性来控制多个重复水印之间的间隔。
+通过 `gap-x` 和 `gap-y` 属性来控制多个重复水印之间的间隔。
 
 ```html
 <van-watermark
-  image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-  :gap-x="20"
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+  :gap-x="30"
   :gap-y="10"
-/>
-```
-
-### 自定义透明度
-
-通过 `opacity` 属性来控制水印的整体透明度。
-
-```html
-<van-watermark
-  image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-  :opacity="0.5"
+  :opacity="0.2"
 />
 ```
 
@@ -57,22 +56,22 @@ app.use(Watermark);
 
 ```html
 <van-watermark
-  image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
   rotate="22"
+  :opacity="0.2"
 />
 ```
 
 ### 显示范围
 
-通过 `fullPage` 属性来控制水印的显示范围。
+通过 `full-page` 属性来控制水印的显示范围。
 
 ```html
 <van-watermark
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+  :opacity="0.2"
   :full-page="true"
-  content="vant watermark"
-  font-color="rgba(0, 0, 0, 0.15)"
->
-</van-watermark>
+/>
 ```
 
 ### HTML 水印
@@ -97,7 +96,7 @@ app.use(Watermark);
 | height | 水印高度 | _number_ | `100` |
 | z-index | 水印的 z-index | _number \| string_ | `100` |
 | content | 文字水印的内容 | _string_ | - |
-| image | 图片水印的内容，如果与 content 同时传入，优先使用图片水印 | _string_ | - |
+| image | 图片水印的内容，如果与 `content` 同时传入，优先使用图片水印 | _string_ | - |
 | full-page | 水印是否全屏显示 | _boolean_ | `false` |
 | gapX | 水印之间的水平间隔 | _number_ | `0` |
 | gapY | 水印之间的垂直间隔 | _number_ | `0` |
diff --git a/packages/vant/src/watermark/demo/index.vue b/packages/vant/src/watermark/demo/index.vue
index 0204ddbe2..35b01ec19 100644
--- a/packages/vant/src/watermark/demo/index.vue
+++ b/packages/vant/src/watermark/demo/index.vue
@@ -27,65 +27,45 @@ const t = useTranslate({
     imageWatermark: 'Image Watermark',
   },
 });
-const baseWatermarkFlag = ref<'text' | 'image'>('text');
+
 const fullPage = ref(false);
 </script>
 
 <template>
-  <demo-block :title="t('basicUsage')">
+  <demo-block :title="t('textWatermark')">
+    <div class="demo-watermark-wrapper">
+      <van-watermark content="Vant" :full-page="false" />
+    </div>
+  </demo-block>
+
+  <demo-block :title="t('imageWatermark')">
     <div class="demo-watermark-wrapper">
-      <div style="position: relative; z-index: 9999">
-        <van-button type="primary" @click="baseWatermarkFlag = 'text'">
-          {{ t('textWatermark') }}
-        </van-button>
-        <van-button
-          type="primary"
-          style="margin: 0 var(--van-padding-md)"
-          @click="baseWatermarkFlag = 'image'"
-        >
-          {{ t('imageWatermark') }}
-        </van-button>
-      </div>
       <van-watermark
-        content="Vant"
-        v-if="baseWatermarkFlag === 'text'"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+        :opacity="0.2"
         :full-page="false"
-      ></van-watermark>
-      <van-watermark
-        image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-        v-if="baseWatermarkFlag === 'image'"
-        :full-page="false"
-      ></van-watermark>
+      />
     </div>
   </demo-block>
 
   <demo-block :title="t('customGap')">
     <div class="demo-watermark-wrapper">
       <van-watermark
-        image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-        :gap-x="20"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+        :gap-x="30"
         :gap-y="10"
+        :opacity="0.2"
         :full-page="false"
       />
     </div>
   </demo-block>
 
-  <demo-block :title="t('customOpacity')">
-    <div class="demo-watermark-wrapper">
-      <van-watermark
-        :full-page="false"
-        :opacity="0.5"
-        image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-      >
-      </van-watermark>
-    </div>
-  </demo-block>
-
   <demo-block :title="t('customRotate')">
     <div class="demo-watermark-wrapper">
       <van-watermark
-        image="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
         rotate="22"
+        :opacity="0.2"
         :full-page="false"
       />
     </div>
@@ -93,13 +73,13 @@ const fullPage = ref(false);
 
   <demo-block :title="t('displayRange')">
     <div class="demo-watermark-wrapper">
-      <van-button @click="fullPage = !fullPage">
+      <van-button type="primary" @click="fullPage = !fullPage">
         {{ t('switch') }}
       </van-button>
       <van-watermark
         :full-page="fullPage"
-        content="vant watermark"
-        font-color="rgba(0, 0, 0, 0.15)"
+        :opacity="0.2"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
       >
       </van-watermark>
     </div>
diff --git a/packages/vant/src/watermark/test/index.spec.ts b/packages/vant/src/watermark/test/index.spec.ts
index dba42a008..55d1518e5 100644
--- a/packages/vant/src/watermark/test/index.spec.ts
+++ b/packages/vant/src/watermark/test/index.spec.ts
@@ -58,7 +58,8 @@ describe('watermark', () => {
     const wrapper = mount(Watermark, {
       props: {
         content: 'Vant',
-        image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        image:
+          'https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png',
         opacity: 0.5,
       },
     });