如何获取元素的背景以显示其父背景？

Question

This image展示了我正在努力做的事情。有一个父div，背景图像集和低不透明度。但是父div中的子div“重置”了不透明度，从而产生了聚焦父母背景图像的效果。

我怎样才能做到这一点？

在https://jsfiddle.net/mmik4/3qjepLkm/43/中有一个代码大纲。你可以拖动内部div。如何创建上面图像的效果？

#container {
  margin: 100px;
  width: 300px;
  height: 300px;
  background: url('https://openclipart.org/image/800px/svg_to_png/235270/BackgroundPattern54Multicolour.png');
  opacity: 0.4;
}

#element {
  width: 100px;
  height: 100px;
  cursor: move;
  border: 3px solid black;
  position: absolute;
}

Answer 1

我想过使用盒子阴影，令我惊讶的是，它的效果非常好。

  box-shadow: 0 0 20000px 20000px rgba(0, 0, 0, .8);

但是：ぁzxswい

Answer 2

我不认为你可以用它上面的一个层来增加下层的不透明度。

我认为你必须做的是拥有完全不透明度和亮度的背景，然后有四个div，每个半透明的黑色或灰色，它们组合在一起，在它们之间留下一个开口，全亮度图像透过。

Answer 3

一种方法是将背景图像设置在容器内具有不同亮度级别的两个div中，并使用轮廓而不是边框​​，这样就不会弄乱两个图像的对齐。

https://jsfiddle.net/mu6ask6c/

示例：

 <div id=container>
  <div id=element></div>
  <div id=shade></div>
</div>


#container {
  margin: 100px;
  width: 300px;
  height: 300px;
}

#shade {
  width: 100%;
  height: 100%;
  background: url('https://openclipart.org/image/800px/svg_to_png/235270/BackgroundPattern54Multicolour.png');
  filter: brightness(50%);
}

#element {
  width: 100px;
  height: 100px;
  cursor: move;
  outline: 3px solid black;
  position: absolute;
  background: url('https://openclipart.org/image/800px/svg_to_png/235270/BackgroundPattern54Multicolour.png');
  filter: brightness(100%);
  z-index: 20;
}