Next.js + Tailwind CSS中如何避免父元素CSS影响子元素？

当父元素设置opacity时，整个子元素树都会继承这个透明度效果，哪怕你给子元素设opacity: 1也没用——父元素的opacity会创建独立的堆叠上下文，子元素的透明度是基于父元素的数值计算的，z-index在这里起不到任何作用。

给你两个靠谱的解决办法：

方法一：用RGBA背景替代父元素opacity #

直接把父元素的bg-black opacity-50换成bg-[rgba(0,0,0,0.5)]，这样只有父元素的背景是半透明黑色，子元素完全不受影响：

<div className="py-8 bg-[rgba(0,0,0,0.5)]">
    <p className="text-white text-6xl text-center z-2">
        Our Promise
    </p>
</div>

方法二：用伪元素承载半透明背景 #

如果需要父元素的整个容器（比如边框、内边距区域）都有半透明效果，而子元素不透明，可以用绝对定位的伪元素做背景，把文字放在更高层级：

<div className="py-8 relative">
    <div className="absolute inset-0 bg-black opacity-50 z-1"></div>
    <p className="text-white text-6xl text-center relative z-2">
        Our Promise
    </p>
</div>

这里伪元素铺满父容器作为半透明背景，文字通过relative和更高的z-index覆盖在上面，完全不受透明度影响。

内容的提问来源于stack exchange，提问作者Mohammad amin Piri