如何实现父元素半透明带模糊效果，同时子元素保持完全不透明？

问题核心：opacity属性会作用于整个元素及其所有子元素，子元素的opacity是相对于父元素计算的——哪怕给子元素设opacity:100%，它实际的透明度还是父元素的50%，所以这种方法无效。

下面提供两种可行解决方案：

方案一：用RGBA/HSLA设置背景透明度（纯色背景首选） #

直接把Banner的背景色改成带透明度的RGBA值，代替给整个容器加opacity。这样只有背景是半透明的，子元素完全不受影响，同时保留backdrop-filter效果。

修改后的CSS代码：

body {
  margin: 0;
}

.banner {
  height: 125px;
  background-color: rgba(0, 128, 0, 0.5); /* 绿色 + 50%透明度 */
  backdrop-filter: blur(20px);
}

.logo {
  color: white;
}

HTML保持不变即可，此时文本会显示为纯白色，无透明度衰减。

方案二：用伪元素实现背景层（复杂背景适用） #

如果Banner背景不是纯色（比如背景图、渐变），或需要更灵活的背景控制，可以用伪元素单独承载半透明和模糊效果，让子元素完全独立于背景层。

修改后的CSS代码：

body {
  margin: 0;
}

.banner {
  height: 125px;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 用伪元素做背景层 */
.banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
  opacity: 50%;
  backdrop-filter: blur(20px);
  z-index: -1; /* 把背景层放在子元素下方 */
}

.logo {
  color: white;
  /* 可选：显式设置position确保子元素在背景层之上，默认z-index已足够 */
  position: relative;
}

这种方法把背景效果和子元素完全分离，文本、图标等子元素都不会受到透明度和模糊的影响。

内容的提问来源于stack exchange，提问作者cts