Question

我已经创建了一个简单的模态窗口（带有帮助），并且了解了如何在单击相应链接后使背景变暗。但是，我似乎还不太清楚如何使我当前单击的背景图像变得模糊。我希望在CSS中完全做到这一点。

这是我到目前为止所拥有的。我希望背景图像看起来像是通过使用滤镜实现的：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>

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

1 个答案: