使用::before伪元素实现header半透明背景不显示问题求解

直接给父元素设置opacity会让所有子元素（文字、按钮）同步继承透明度，这是CSS属性的既定规则，无法通过子元素单独设置opacity抵消。
你写的::before伪元素方案思路正确，但缺少3个关键属性导致不生效：

• 父元素header未设置定位上下文，绝对定位的伪元素没有定位参照
• 伪元素未设置偏移值或宽高，实际渲染尺寸为0，无法显示背景
• 未设置层级，伪元素可能覆盖在内容上方

方案1：伪元素方案（全浏览器兼容，推荐） #

仅需修改CSS，HTML结构无需任何调整：

header {
    padding: 10px;
    margin: 0;
    /* 新增：为伪元素提供定位参照 */
    position: relative;
    /* 可根据需求自定义header高度，例如 min-height: 90vh; */
}

header::before {
    content: "";
    /* 新增：四个方向偏移为0，让伪元素完全铺满header区域 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('你的背景图路径') no-repeat top center;
    background-size: cover;
    opacity: 0.75; /* 调整这个值修改背景透明度，0完全透明，1完全不透明 */
    /* 新增：将伪元素放到内容层下方，避免遮挡文字按钮 */
    z-index: -1;
}

使用时把background里的图片路径替换成你自己的资源地址即可，内部文字、按钮的透明度完全不受背景透明度影响。

方案2：混合背景方案（代码更简洁，现代浏览器支持） #

无需伪元素，直接通过多层背景实现半透明效果，代码量更少：

header {
    padding: 10px;
    margin: 0;
    /* 第一层为半透明遮罩，第二层为背景图，调整rgba的最后一个参数修改透明度 */
    background: linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)),
                url('你的背景图路径') no-repeat top center / cover;
}

如果需要暗色半透明遮罩，把rgba里的前三个值改成0即可，不需要使用opacity属性，自然不会影响子元素。

注意：如果需要背景是原图本身半透明、不是叠加半透明遮罩，只能使用方案1的伪元素写法；方案2是通过叠加半透明纯色层实现视觉上的半透明效果，适合需要给背景加蒙层提升文字可读性的场景。

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