父元素渐变背景下实现点击穿透且背景覆盖子元素的方法

问题分析 #

你当前的矛盾点在于：父元素的渐变背景会覆盖子元素并拦截点击，设置子元素z-index:-1虽能让它跑到背景下方，但父元素的点击拦截依然存在；调整父元素pointer-events:none会导致父元素的滚动、边框交互失效，同时子元素的层级会脱离父元素范围。

解决方案 #

通过父元素的::before伪元素承载渐变背景，将背景层与父元素的交互层分离，既保留渐变效果，又不影响子元素的点击和层级关系：

1. 父元素设置position:relative，为伪元素提供定位基准
2. 移除父元素的background属性，改用::before伪元素生成渐变背景
3. 伪元素设置position:absolute、inset:0（占满父元素空间），并将z-index设为-1，确保它在子元素下方
4. 伪元素添加pointer-events:none，让点击事件直接穿透到子元素
5. 移除子元素的z-index:-1，避免层级混乱

修改后的CSS代码 #

.shop-catalog-items {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  display: flex;
  overflow-x: scroll;
  position: relative; /* 新增：为伪元素定位 */
  /* 移除原background属性 */
}

/* 新增伪元素承载渐变背景 */
.shop-catalog-items::before {
  content: "";
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left:0，占满父元素 */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.795), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.795));
  z-index: -1; /* 背景层在子元素下方 */
  pointer-events: none; /* 点击穿透到子元素 */
}

.shop-catalog-item1 {
  margin: 3vh;
  padding: 1vh;
  border-radius: 2vh;
  background-color: #A29BDD;
  border: 0px solid white;
  min-width: 400px;
  /* 移除z-index:-1 */
  pointer-events: all; /* 确保子元素可点击 */
}

.shop-catalog-item2 {
  /* 与item1样式一致，同样移除z-index:-1 */
  margin: 3vh;
  padding: 1vh;
  border-radius: 2vh;
  background-color: #A29BDD;
  border: 0px solid white;
  min-width: 400px;
  pointer-events: all;
}

效果说明 #

• 父元素的渐变背景正常显示，且位于所有子元素下方
• 子元素的点击事件完全正常，不会被背景层拦截
• 父元素的滚动、边框等原有功能不受影响

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