CSS伪类叠加时main2类背景图片无法显示问题咨询

核心原因 #

你遇到的问题是两个错误共同作用导致的：

• 语法错误：.main2::after的z-index属性值写为非法的-3m，浏览器会直接忽略该属性，伪元素作为绝对定位元素，默认堆叠层级高于父元素的背景层，不透明的渐变完全覆盖了下方的背景图，所以只有降低渐变透明度才能透出底层的图片。
• 层叠上下文规则：你给.main2设置了z-index: 1，触发了独立的层叠上下文，内部所有子元素（包括::after伪元素）的层级都在该上下文内部计算。本来你想把伪元素层级设为负值放到背景下方，但写错属性值后伪元素层级默认和普通定位元素一致，跑到了背景层上方。

修复方案 #

你可以根据需求选择以下两种实现方式：

方案1：双背景实现（更推荐，即你当前在用的方案） #

CSS的背景图像遵循「先写的层级更高，覆盖后写的」的规则，直接把渐变和背景图都配置在.main2的background-image属性中即可，不需要额外伪元素，也不会出现层级冲突：

.main2{
  margin-top: 20rem;
  position: relative;
  /* 注意顺序：渐变在前，背景图在后，实现渐变叠加在图片上的效果 */
  background-image: 
    linear-gradient(to right, hsl(237, 17%, 21%), hsl(237, 23%, 32%)),
    url(images/bg-pattern-circles.svg);
  border-top-right-radius: 10rem;
  border-bottom-left-radius: 10rem;
  /* 可额外通过background-position、background-size分别控制两个背景的位置、尺寸 */
}

方案2：伪元素实现（适合需要单独控制渐变层的场景） #

修正z-index的语法错误，同时给内部内容设置更高层级，避免文字被渐变层覆盖：

.main2{
  margin-top: 20rem;
  position: relative;
  background-image: url(images/bg-pattern-circles.svg);
  border-top-right-radius: 10rem;
  border-bottom-left-radius: 10rem;
}
.main2::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* 修正z-index值，层级低于内容、高于背景 */
  z-index: 0;
  background-image: linear-gradient(to right, hsl(237, 17%, 21%), hsl(237, 23%, 32%));
}
/* 给内部内容设置定位和更高层级，保证显示在渐变层上方 */
.main2 > * {
  position: relative;
  z-index: 1;
}

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