如何用CSS实现可拖拽的Div穿透查看效果？

我有4个HTML div元素，需要实现的效果是：制作2个可拖拽的蓝色半透明div，能显示它们和下方div的交集区域。

我最初的思路是：

• 创建2个名为div3/div4的img元素，设置和div2相同的background-image；
• 通过JavaScript获取cursor position（比如用event.clientX）；
• 根据光标位置偏移div3和div4的background-position。

但给div3、div4应用transform时，background-image会变形，遮罩效果也失效了。

核心问题：如何用div(2)在div(3)上方遮罩div(1)？ 用图片遮罩没法做动态效果，用div的话可以动态修改内容。

以下是示例代码，可查看CSS transform属性作用时小div背景的变形情况（暂未加入拖拽JS，问题核心聚焦在div属性上）：

CSS代码 #

.main {
    position: absolute;
    width: 300px;
    height: 300px;
    background-image: url(https://images.pexels.com/photos/1266810/pexels-photo-1266810.jpeg);
    background-size: 300px;
}
/* 图片来源：pexels */
.secret {
    position: absolute;
    background-color: orange;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: loop 3s 0s infinite;
}
.lookthrough {
    position: absolute;
    width: 70px;
    height: 70px;
    background-image: url(https://images.pexels.com/photos/1266810/pexels-photo-1266810.jpeg);
    background-size: 300px;
}
.example1 {
    left: 80px;
    top: 40px;
    background-position: -80px -40px;
    animation: stackoverflowexample 3s 0s infinite;
}
.example2 {
    left: 160px;
    top: 180px;
    background-position: -160px -180px;
    animation: stackoverflowexample 4s 0s infinite;
}
@keyframes loop {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes stackoverflowexample {
    0% { transform: perspective(600px) rotateY(-180deg); }
    50% { transform: perspective(600px) rotateY(0deg); }
    100% { transform: perspective(600px) rotateY(-180deg); }
}

HTML代码 #

<!DOCTYPE html>
<html>
    <body style="margin: 0px;">
        <div class="main"><div class="secret"></div></div>
        <div class="lookthrough example1">I need content here</div>
        <div class="lookthrough example2">I need content here</div>
    </body>
</html>

要解决transform导致背景变形、遮罩失效的问题，推荐用CSS遮罩（mask）或嵌套容器+overflow:hidden的方案，避免直接对带背景的元素应用3D变换：

方案1：CSS遮罩+嵌套容器 #

将可拖拽div作为容器，内部嵌套两个元素：一个同步主图背景，一个做半透明遮罩。transform仅作用于容器，内部元素背景不会变形。

核心代码：

.drag-window {
    position: absolute;
    width: 70px;
    height: 70px;
    transform-style: preserve-3d; /* 保持内部元素3D空间渲染 */
    cursor: move;
}
.window-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(主图地址);
    background-size: 300px;
    /* JS拖拽时，同步设置background-position为 -窗口left值 -窗口top值 */
}
.window-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,255,0.2);
    pointer-events: none; /* 不干扰拖拽操作 */
}

拖拽时只需更新.drag-window的left/top，同步.window-bg的background-position即可。

方案2：overflow:hidden+内部图片偏移 #

主图放在底层，可拖拽div设置overflow:hidden，内部放置和主图一致的图片，通过定位偏移实现对齐。外层div加transform时，内部图片比例不受影响。

核心代码：

.drag-window {
    position: absolute;
    width: 70px;
    height: 70px;
    overflow: hidden;
    transform-style: preserve-3d;
    cursor: move;
}
.inner-img {
    position: absolute;
    width: 300px;
    height: 300px;
    background-image: url(主图地址);
}
.window-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,255,0.2);
    pointer-events: none;
}

拖拽时更新.drag-window的left/top，同时设置.inner-img的left为-窗口left值、top为-窗口top值，即可让内部图片与底层主图完全对齐。

关键注意事项 #

• 不要直接给需要精确对齐背景的元素加3D transform，把变换作用在父容器上；
• 用transform-style: preserve-3d保证内部元素在3D空间中正确渲染；
• 动态内容直接添加到.drag-window容器内即可，不影响遮罩和背景对齐。

内容的提问来源于stack exchange，提问作者Beyto A.