javascript - 里面有透明方块的覆盖

Question

现在我有如下所示的内容。我希望正方形是透明的，这意味着背景有一个“叠加”效果，但是一个透明的正方形，所以我可以查看它下面的项目。

请问这是否可以实施？

.overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 250px;
  border: solid red 1px;
  background-color: rgba(0, 0, 0, 0.3);
}

.square{
  height: 100px;
  width: 100px;
  border: solid lime 1px;
  background-color: transparent !important; 
}

<div class="overlay">
  <div class="square"></div>
</div>

标签： javascripthtmlcss

Answer 1

就用这样的巨人box-shadow——

.overlay{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 250px;
  border: solid red 1px;
  background-color: green;
  overflow:hidden;
}

.square{
  height: 100px;
  width: 100px;
  border: solid lime 1px;
  box-shadow: 0 0 0 500px red;

}

<div class="overlay">
  <div class="square"></div>
</div>

实际上，如果您使用插入框阴影，则根本不需要方形 div

.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  width: 250px;
  border: solid red 1px;
  background-color: green;
  overflow: hidden;
  margin: 1em auto;
  box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 1);
}

<div class="overlay">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae saepe hic sequi eveniet iusto est corrupti commodi porro! Dignissimos provident voluptas numquam iste corrupti at?</p>
</div>