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，但令我惊讶的是，它运行得很好。

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

演示：https://jsfiddle.net/mu6ask6c/

Answer 2

我不认为你可以用你上面的一层做任何事情来增加下层的不透明度。

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

Answer 3

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

 <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;
}

示例：https://jsfiddle.net/53t9k3j3/

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

3 个答案: