rgba 的背景不透明度应用于内部 class

Question

我正在使用 react module.css 并且我的外部 class 有一个 rgba 使不透明度略微变灰。问题是，我不希望它应用于正在发生的内部 class。

JSX

import styles from "./Join_popup.module.css";

function Join_popup(props) {
  return (
    <div>
      <div className={styles.outer}>
        <div className={styles.inner}>HELLO</div>
      </div>
    </div>
  );
}

export default Join_popup;

CSS

.outer {
    width: 100vw;
    height: 100vh;
    opacity: 50%;
    background-color: rgba(178, 190, 177, 0.6);
    position: fixed;
    top: 0%;
    left: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner {
    position: relative;
    background-color: black;
    width: 400px;
    height: 500px;
    opacity: 1;
    border-radius: 5%;
}

Answer 1

外部的 opacity: 50% 适用于内部，即使它有一个 opacity: 1 集。用 alpha 删除这个和背景色 rgba .6 的（不透明度）应该完成它的工作。

rgba 的背景不透明度应用于内部 class

Background opacity from rgba applying to inner class

css

jsx

reactjs