fix: 调整图文工具栏布局，解决顶部遮挡问题，图片透明度滑块添加百分比

README.md

@@ -57,7 +57,8 @@
 17. 层叠图添加辅助线
 18. 可添加多个文本框，以及文本框删除功能
 19. 添加图片编辑器工具栏，图片编辑器与文本编辑器共用同一位置工具栏，选中对应元素切换对应编辑面板，点击空白处隐藏面板
-20. 当选择文字的时候工具栏对应出现文字编辑器，当选择图片的时候工具栏对应出现图片编辑器，点击其他位置时隐藏工具栏
+20. 当选择文字的时候工具栏对应出现文字编辑器，当选择图片的时候工具栏对应出现图片编辑器，点击其他位置时隐藏工具栏，两个编辑栏的宽高保持和文本编辑器工具栏一致
+
 
 
 

css/style.css

@@ -82,7 +82,7 @@ html, body {
 /* 编辑器工具栏（文本/图片共用） */
 .editor-toolbar {
     position: absolute;
-    top: 49px;
+    top: 65px;
     left: 0;
     right: 0;
     display: flex;

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>

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 + '%';
     }
 
     // 计算图片滑动边界