html - 为开放模式创建背景 - CSS NO BOOTSTRAP

Question

我正在尝试找到解决此问题的最简单方法。我只希望我的开放模式的背景看起来是灰色的。我似乎找不到这个问题的任何直接答案。不过，我即将实现这一目标。现在，当模式打开时，我的 javascript 会向应用程序的整个主体添加一个类。该类称为 openModal。我目前的尝试是在该类上调用 opacity: 0.4;。这确实会增加页面的不透明度。但它也涵盖了模态。我不想发生这种情况。我怎样才能让模态覆盖不透明度？

这是我的 CSS。

.openModal {
  opacity: 0.3;

  .proceeds-modal {
    padding: 20px;
    position: absolute;
    top: 200px;
    width: 95%;
    right: 2%;
    height: auto;
    background-color: $base-background-color;
    border: 1px solid #ddd;
    box-shadow: 0.2px 0.6px 0.5px 0.5px;
  }
}

Answer 1

在看不到您的 HTML 的情况下，我建议在 .openModal 上设置一个 rgba() 背景，例如 .openModal { background: rgba(0,0, 0,0.5); }

或者您始终可以使用 .openModal 的伪元素，并使用 rgba() 或像您已经尝试过的那样使用 opacity。

.proceeds-modal {
  padding: 20px;
  position: absolute;
  top: 200px;
  width: 95%;
  right: 2%;
  height: auto;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0.2px 0.6px 0.5px 0.5px;
  z-index: 1;
}

.openModal:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  content: '';
}

<div class="openModal">
  <div class="proceeds-modal">
    modal
  </div>
</div>