专注于背景模糊的所选容器

Question

我正在尝试创建分步教程，我需要分离容器并模糊其余应用程序。问题是创建模糊的背景而不影响所选容器。

“选择的容器” 已预先给出大小和position: relative;。 我通过给一个子组件来选择这个容器： position: absolute; 和大小 width: 100% height: 100%;，但我不知道如何在不影响容器的情况下将包装背景background: rgba(0, 0, 0, 0.5)添加到混合中。

<div style="position: relative; ..." > //Selected container
  <div style="position: absolute; width: 100%; heith: 100%; ..."> // selector
  </div>
</div>

Answer 1

您可以将背景添加到body或包装器中（如果有的话），然后将背景添加到元素中，因为默认情况下它没有背景，并且如果未指定也将被着色背景：

body {
  background: red; 
}

.mainContainer {
  background: #fff;
}