css - 打开模态窗口后，使背景模糊而不是变黑

Question

我创建了一个简单的模态窗口(在帮助下)，我了解它如何在单击相应链接后使背景变暗。但是，我似乎不太清楚如何使我目前在单击时变得模糊的背景图像。我希望在 CSS 中完全做到这一点。

这是我目前所拥有的。我希望背景图像看起来像什么是通过使用 filter: blur(5px);

我认为这个问题与我不完全理解 :target 函数的工作原理有关。

/* Design Modal Window */
/* .modal_style {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px black;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
} */

本质上不是背景:rgba(0, 0, 0, 0.8);我希望背景模糊，但是当我将过滤器元素放在它的位置时，它模糊了模态窗口而不是背景。

Answer 1

您不能在父级上使用模糊，而在子级上禁用它。您必须在同一级别创建两个 div。这是一个例子:

.modal-content{
  height:150px;
  width:200px;
  position: absolute;
  background-color:white;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.modal-background{
  filter:blur(5px);
  position:absolute;
  width:100%;
  height:100%;
}

<div class="modal-background">
  <image src="https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962_960_720.jpg"></image>
</div>
<div class="modal-content">
This a  modal
</div>