css opacity 设置透明度 不影响内部子元素

将元素背景相关的设置用伪元素::after去定义，然后给伪元素设置透明度即可

 div {
        width: 200px;
        height: 200px;
        position: relative;
      }
      div::after {
        content: "";
        background: red;
        opacity: 0.3;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
      }