Safari浏览器中:after伪元素背景遮罩不显示问题求助

问题根源 #

Safari对CSS中rgb(0 0 0 / 60%)这种新式颜色语法存在兼容性问题，同时background-attachment: fixed可能与伪元素的定位规则产生堆叠上下文冲突，最终导致遮罩层无法正常渲染。

可行修复方案 #

方案1：替换为兼容性更好的rgba()颜色写法 #

直接将遮罩的背景色语法改为Safari完全支持的传统rgba格式：

section:after {
    content: '';
    /* 替换为兼容所有浏览器的rgba写法 */
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

方案2：明确堆叠上下文层级 #

通过设置z-index，强制定义遮罩层、背景图与文本的显示顺序：

section {
  /* 原有样式保留，添加z-index初始化堆叠上下文 */
  z-index: 0;
}

section:after {
    content: '';
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* 让遮罩层处于背景图之上、文本之下 */
    z-index: 0;
}

section h1 {
  color: white;
  z-index: 1;
}

方案3：分离背景图与遮罩伪元素（解决fixed背景冲突） #

如果是background-attachment: fixed导致的异常，将背景图单独放到一个伪元素中，与遮罩层分离：

section {
    height: 100vh;
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

/* 单独承载背景图的伪元素 */
section:before {
    content: '';
    background-image:url('https://www.encompasscorporation.com/wp-content/uploads/2015/09/example-background.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* 遮罩伪元素 */
section:after {
    content: '';
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

section h1 {
  color: white;
  z-index: 1;
}

验证方式 #

修改代码后刷新Safari浏览器，检查遮罩是否正常显示，文本与背景的对比度是否满足阅读需求。

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