CSS 显示特定的图像剪辑(与父级重叠)以供进一步过滤

Question

请看我附上的图片。我想要实现的是，你看到的矩形(让我们把它想象成一个 div)，有一个背景图像(国际象棋图案)就像父(整个图像)一样。问题是，子项(Black Rect)应该只绘制背景图像的一部分，它与父项重叠(以处理进一步的效果，例如模糊)。

所以如果有 css 技巧，我会争取:

• 只绘制与父级重叠的图像剪辑(也可以是整个 body )或
• 具有动态 CSS 功能来获取自己的位置并计算它必须显示的图像位置。 (例如 background-position: [Position-X-Of-Div] 100px;)

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

如果那不行，我也愿意改用sass，less

Answer 1

使用伪元素，你可以做这样的事情

不幸的是，CSS 没有内置函数来以这种情况下所需的方式从自身及其父级计算值，因此您需要一个脚本来调整 inner::before left/top 值相对于inner left/top，所以前者是后者的负值。

(function() {
  window.addEventListener("load", function() {
    var el = document.querySelector('.inner');
    el.classList.add('moveme');
  });
})();

.outer {
  position: relative;
  width: 95vh;
  height: 95vh;
  background: url(/image/gcSoj.jpg) center center / cover no-repeat;
}

.inner {
  position: absolute;
  left: 10vh; 
  top: 10vh;
  width: 40vh; 
  height: 30vh;
  overflow: hidden;
}

.inner::before {
  content: '';
  position: absolute;
  left: -10vh; 
  top: -10vh;
  width: 95vh;
  height: 95vh;
  background: url(/image/gcSoj.jpg) center center / cover no-repeat;

  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.inner.moveme {
  animation: moveme 3s linear forwards;
}
.inner.moveme::before {
  animation: moveme2 3s linear forwards;
}

@keyframes moveme {
  from { transform: translate(0,0); }  
  to   { transform: translate(20vh,20vh); }  
}
@keyframes moveme2 {
  from { transform: translate(0,0); }  
  to   { transform: translate(-20vh,-20vh); }  
}

<div class="outer">
  <div class="inner"></div>
</div>