CSS实现背景半透明且前景文字不透明，z-index无效问题求解

你当前的问题出在opacity属性的特性上——它会作用于元素本身以及所有子元素，所以设置.item { opacity: 20%; }时，里面的文字也会跟着变透明，z-index解决不了这个问题，因为它只控制元素的堆叠顺序，不改变opacity的继承行为。

这里有两种简单有效的解决方案：

方案一：使用RGBA颜色值直接定义带透明度的背景色 #

把background-color和opacity合并成一个RGBA值，这样只有背景色会带有透明度，子元素完全不受影响。

#FDFFFF对应的RGB数值是253, 255, 255，20%不透明度对应alpha值0.2，修改.item的CSS如下：

.item{
    padding: 1rem;
    background-color: rgba(253, 255, 255, 0.2);
}

方案二：利用伪元素单独创建背景层 #

通过伪元素生成一个独立的背景层，将其放在内容下方，完全分离背景和内容的样式：

.item{
    padding: 1rem;
    position: relative; /* 为伪元素提供定位基准 */
}
.item::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FDFFFF;
    opacity: 20%;
    z-index: -1; /* 将背景层置于内容下方 */
}

两种方法都能实现需求：背景色是#FDFFFF带20%透明度，内部文字保持完全不透明。

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