不透明半透明覆盖层，带透明圆圈

Question

我正在尝试在网站上添加半透明的黑色覆盖，除了透明的圆形区域。图像吼叫。

我尝试过不同的父子关系和不透明度设置但没有成功。有没有办法处理CSS或JavaScript？

编辑： 这是我正在研究的代码。黑色圆圈应该是透明的。 https://jsfiddle.net/f47oto4o/

HTML：

<div>
  <p>
   This should be shown
  </p>
</div>
<div class="overlay">
   <div class="transparent-circle"></div>
</div>

的CSS：

p {
  margin-top: 200px;
  text-align: center;
}

.overlay {
  background: rgba(0,0,0,0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.transparent-circle {
  position: absolute;
  top: 160px;
  left: 50%;
  height: 100px;
  width: 100px;
  background: rgba(0,0,0,1.0);
  z-index: 2;
  border-radius: 100%;
}

编辑2： 这应该标记为重复吗？问题在于不透明度和透明度，而不是在div中削减漏洞。这就是为什么我原本无法找到问题的解决方案。

Answer 1

您可以通过创建一个包含大box-shadow个值的圆来实现此目的：

.circle {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7);
  border-radius: 100%;
  height: 150px;
  width: 150px;
}

＆＃13;

＆＃13;

* {box-sizing: border-box;}

body {
  min-height: 100vh;
  padding: 10px;
  margin: 0;
}

.popup {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  overflow: hidden;
  display: flex;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.circle {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7);
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 100%;
  display: flex;
  height: 150px;
  width: 150px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<p>
  Lomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit amet
</p>
<div class="popup">
  <div class="circle">
    <button type="button" class="btn btn-success">Add Service</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;