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

【问题标题】：Upon opening a modal window, make the background blur rather than going black打开模态窗口后，使背景模糊而不是变黑
【发布时间】：2019-09-16 03:44:45
【问题描述】：

我创建了一个简单的模态窗口（在帮助下），并且我了解它如何在单击相应链接后使背景变暗。但是，我似乎不太清楚如何使我目前在单击时变得模糊的背景图像。我希望完全在 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);我希望背景模糊，但是当我将过滤器元素放在它的位置时，它会模糊模态窗口而不是背景。

【问题讨论】：

标签： css filter modal-dialog

【解决方案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>

【讨论】：