CSS伪元素叠加效果

Question

我该如何用伪元素创建CSS叠加层？

.modal {
     position:fixed;
     top:100px;
     margin-left: auto;
     margin-right: auto;
     left:0;
     right:0;
     width:500px;
     display:none;
     border:2px solid #736D61;
     background:#fff;
     padding:10px;
}
.modal:after {
     position:fixed;
     top:0px;
     left:0px;
     width:100%;
     height:100%;
     background:rgba(0,0,0,0.5);
}

我尝试过这个方法，但它没有起作用。

- Jason DeClau

Answer 1

可能不起作用是因为如果省略content值，则不会生成伪元素。默认的content值是none，这很可能是您没有看到伪元素的原因。因此，您需要为content属性指定一个非none的值：

.modal:after {
  content: '';
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

值得一提的是，伪元素实际上是作为子元素添加的，由于会建立一个堆叠上下文，因此它将位于.modal元素之上。为了解决这个问题，您可以像这样向.modal元素的父元素添加一个:before伪元素：

.modal {
  position: fixed;
  top: 100px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 500px;
  border: 2px solid #736D61;
  background: #fff;
  padding: 10px;
}

.modal-overlay:before {
  content: '';
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

<div class="modal-overlay">
  <div class="modal">MODAL</div>
</div>

- Josh Crozier

---

成功了！但它覆盖了模态框。我该怎么解决？ - Jason DeClau

@JasonDeClau 问题在于伪元素本质上是作为子元素添加的。这意味着它将位于.modal元素之上，因为建立了堆叠上下文。为了解决这个问题，您可以像这个例子中一样，在父包装元素中添加:before伪元素 - https://jsfiddle.net/63ockpds/ - Josh Crozier

Answer 2

另一个解决方案是使用border-box。无需伪类：

.modal {
  background-color: #fff;
  left: 50%;
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
  padding: 20px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);  
  z-index: 999;   
}

Codepen示例

它也适用于轮廓：

outline: 9999px solid rgba(0,0,0,0.6);

快速简便 ^^

- dragoweb

---

这真是太有趣了，而且效果非常好，一点也不打扰。谢谢你提供这个完美的解决方案！ - undefined