可拖拽缩放背景图叠加透明遮罩后交互失效问题求助

问题描述 #

我做了一个可拖拽、缩放的图片区域，想在上面叠加一张透明遮罩图，同时保留背景图的拖拽和缩放功能。但叠加遮罩后，背景图的拖拽/缩放就失效了。调z-index会让遮罩被缩放后的背景图挡住，试了position:absolute和relative重新定位也没用。相关代码如下：

<div class="GridRight">
    <div class="zoom_outer">
        <div id="zoom">
            <img id="blah" src="http://placehold.it/180" alt="your image" />
        </div>
    </div>

    <div class="OverlayImage">
        <img src="img/TESTER.webp" alt=""/>
    </div>

    <script>
        var scale = 1,
        panning = false,
        pointX = 0,
        pointY = 0,
        start = { x: 0, y: 0 },
        zoom = document.getElementById("zoom");

        function setTransform() {
            zoom.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
        }

        zoom.onmousedown = function (e) {
            e.preventDefault();
            start = { x: e.clientX - pointX, y: e.clientY - pointY };
            panning = true;
        }

        zoom.onmouseup = function (e) {
            panning = false;
        }

        zoom.onmousemove = function (e) {
            e.preventDefault();
            if (!panning) {
                return;
            }
            pointX = (e.clientX - start.x);
            pointY = (e.clientY - start.y);
            setTransform();
        }

        zoom.onwheel = function (e) {
            e.preventDefault();
            var xs = (e.clientX - pointX) / scale,
                ys = (e.clientY - pointY) / scale,
                delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
            (delta > 0) ? (scale *= 1.2) : (scale /= 1.2);
            pointX = e.clientX - xs * scale;
            pointY = e.clientY - ys * scale;

            setTransform();
        }// JavaScript Document
    </script>
    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }   
    </script>
</div>

解决办法 #

核心问题是遮罩层挡住了鼠标事件，导致下方的zoom容器接收不到操作，以下两种方法都能解决：

方法1：让遮罩层穿透鼠标事件

给.OverlayImage添加CSS，让鼠标事件直接透传到下方背景图容器，同时固定遮罩位置保证它始终在最上层：

.GridRight {
    position: relative; /* 作为遮罩的定位父容器 */
    width: 400px; /* 按需设置宽度 */
    height: 400px; /* 按需设置高度 */
    overflow: hidden;
}

.zoom_outer {
    width: 100%;
    height: 100%;
}

#zoom {
    position: absolute;
    top: 0;
    left: 0;
}

.OverlayImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 确保遮罩在背景图上方 */
    pointer-events: none; /* 关键：让鼠标事件穿透遮罩 */
}

.OverlayImage img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持遮罩比例，按需调整 */
}

设置后遮罩会一直覆盖在背景图上，鼠标的点击、拖拽、滚轮操作都会直接作用到下方的#zoom容器。

方法2：将遮罩嵌套进缩放容器

如果需要遮罩跟着背景图一起缩放拖拽，把遮罩放到#zoom容器内部，它会和背景图同步变换，同样添加事件穿透：

修改后的HTML结构：

<div class="GridRight">
    <div class="zoom_outer">
        <div id="zoom">
            <img id="blah" src="http://placehold.it/180" alt="your image" />
            <!-- 把遮罩移到缩放容器内 -->
            <div class="OverlayImage">
                <img src="img/TESTER.webp" alt=""/>
            </div>
        </div>
    </div>

    <!-- 脚本部分不变 -->
</div>

对应的CSS：

#zoom {
    position: relative; /* 作为遮罩的定位父容器 */
}

.OverlayImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 事件穿透 */
}

.OverlayImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

这种方式下，遮罩会和背景图同步缩放、拖拽，无需额外调整定位，适合遮罩与背景图需同步位置的场景。

内容的提问来源于stack exchange，提问作者Steven