CSS显示特定的图像剪辑（与父级重叠），以进行进一步筛选

请看我随附的照片。 我想要实现的是，您看到的矩形（让我们把它想象成一个div）有一个背景图像（国际象棋模式），就像父对象（整个图像）一样。问题是，子对象（黑色矩形）应该只绘制背景图像中与父对象重叠的部分（以处理进一步的效果，例如模糊）

因此，如果有css技巧，我会努力：

• 仅绘制与父对象重叠的图像片段（也可以是整个身体）或
• 有一个动态CSS功能，以获得自己的位置和计算图像的位置，它必须显示。（例如类似于

  背景位置：[position-X-Of-Div]100px；

  ）

我很高兴能得到任何帮助！如果有什么不清楚的地方，请随时询问

如果这是不可能的，我也愿意切换到sass，更少

---

使用伪元素，可以执行以下操作

不幸的是，CSS没有一个内置函数来按照本例中所需的方式计算自身和其父级的值，因此您需要一个脚本来调整

inner:：before

left/top相对于

inner

left/top的值，因此前者是后者的负数

（函数（）{
addEventListener（“加载”，函数（）{
var el=document.querySelector（'.inner'）；
el.classList.add（'moveme'）；
});
})();
.outer{
位置：相对位置；
宽度：95vh；
高度：95vh；
背景：url(https://i.stack.imgur.com/gcSoj.jpg)居中/盖不重复；
}
.内部{
位置：绝对位置；
左：10vh；
顶部：10vh；
宽度：40vh；
高度：30vh；
溢出：隐藏；
}
.内部：：之前{
内容：''；
位置：绝对位置；
左：-10vh；
顶部：-10vh；
宽度：95vh；
高度：95vh；
背景：url(https://i.stack.imgur.com/gcSoj.jpg)居中/盖不重复；
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
}
.inner.moveme{
动画：向前移动3秒；
}
.inner.moveme：：之前{
动画：向前移动3秒；
}
@关键帧移动我{
来自{transform:translate（0,0）；}
到{转换：翻译（20vh，20vh）；}
}
@关键帧moveme2{
来自{transform:translate（0,0）；}
到{transform:translate（-20vh，-20vh）；}
}

如果这是不可能的，我也愿意切换到sass，更少-两者都编译为CSS，所以CSS中不可能的东西在它们中也是不可能的。我不知道这一点。目前我在计算位置时遇到了问题，我认为less/sass更具动态性，而CSS预处理器对HTML一无所知，因此它们无法对所述HTML执行任何“动态”操作（特别是浏览器将在其中呈现任何内容的坐标）。这适用于不改变位置的DIV。我也可以使用背景附件：固定；不必计算位置！存在的问题是，背景附件：固定；设置动画（幻灯片效果）时不起作用，否则我很难计算位置。@MichaelRampl使用pseudo，设置动画时，为元素及其上的左/顶值设置动画pseudo@MichaelRampl用动画更新了我的答案