外层容器透明，内容不透明的处理方式

前言

遇到设计图里有这种效果，本来是在外层元素加opacity: 0.7这种去处理，但是会影响到内部的元素，同样也变透明。

解决方式

外层容器background采用rgba方式去设置透明度，内层容器按照原来样式进行处理，即可。

代码

.wrapper {
  height: 40px;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

结束语

觉得有用的话，还请点个赞，谢谢！