From feef47009692600f72138e72899c304b0d5d8c83 Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Sat, 18 Apr 2026 15:04:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=9B=BE=E6=96=87?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=8F=E5=B8=83=E5=B1=80=EF=BC=8C=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E9=A1=B6=E9=83=A8=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E5=9B=BE=E7=89=87=E9=80=8F=E6=98=8E=E5=BA=A6=E6=BB=91?=
 =?UTF-8?q?=E5=9D=97=E6=B7=BB=E5=8A=A0=E7=99=BE=E5=88=86=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md     | 3 ++-
 css/style.css | 2 +-
 index.html    | 1 +
 js/script.js  | 3 +++
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 9c36247..c31ae7e 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,8 @@
 17. 层叠图添加辅助线
 18. 可添加多个文本框，以及文本框删除功能
 19. 添加图片编辑器工具栏，图片编辑器与文本编辑器共用同一位置工具栏，选中对应元素切换对应编辑面板，点击空白处隐藏面板
-20. 当选择文字的时候工具栏对应出现文字编辑器，当选择图片的时候工具栏对应出现图片编辑器，点击其他位置时隐藏工具栏
+20. 当选择文字的时候工具栏对应出现文字编辑器，当选择图片的时候工具栏对应出现图片编辑器，点击其他位置时隐藏工具栏，两个编辑栏的宽高保持和文本编辑器工具栏一致
+
 
 
 
diff --git a/css/style.css b/css/style.css
index c112771..b003499 100644
--- a/css/style.css
+++ b/css/style.css
@@ -82,7 +82,7 @@ html, body {
 /* 编辑器工具栏（文本/图片共用） */
 .editor-toolbar {
     position: absolute;
-    top: 49px;
+    top: 65px;
     left: 0;
     right: 0;
     display: flex;
diff --git a/index.html b/index.html
index d9e979e..f42207e 100644
--- a/index.html
+++ b/index.html
@@ -52,6 +52,7 @@
                 <label class="toolbar-label">
                     <span>透明度</span>
                     <input type="range" id="opacitySlider" min="0" max="100" value="100" class="opacity-slider">
+                    <span id="opacityValue">100%</span>
                 </label>
             </div>
         </div>
diff --git a/js/script.js b/js/script.js
index 3ca8f8e..003c70d 100644
--- a/js/script.js
+++ b/js/script.js
@@ -18,6 +18,7 @@
     const textTools = document.getElementById('textTools');
     const imageTools = document.getElementById('imageTools');
     const opacitySlider = document.getElementById('opacitySlider');
+    const opacityValue = document.getElementById('opacityValue');
     const boldBtn = document.getElementById('boldBtn');
     const italicBtn = document.getElementById('italicBtn');
     const colorPicker = document.getElementById('colorPicker');
@@ -108,6 +109,7 @@
         opacitySlider.addEventListener('input', (e) => {
             if (selectedOverlay) {
                 selectedOverlay.style.opacity = e.target.value / 100;
+                opacityValue.textContent = e.target.value + '%';
             }
         });
 
@@ -525,6 +527,7 @@
         // 更新透明度滑块为当前层叠图的透明度
         const currentOpacity = overlayEl.style.opacity || '1';
         opacitySlider.value = parseFloat(currentOpacity) * 100;
+        opacityValue.textContent = opacitySlider.value + '%';
     }
 
     // 计算图片滑动边界