rgba的背景不透明度应用于内部类[重复]答案

【问题标题】：Background opacity from rgba applying to inner class [duplicate]rgba的背景不透明度应用于内部类[重复]
【发布时间】：2022-01-15 21:53:22
【问题描述】：

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

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%;
}

【问题讨论】：

标签： css reactjs jsx

【解决方案1】：

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

【讨论】：

已修复。谢谢！