Vue中isDarkMode导致背景图片不显示问题求助

问题原因 #

1. 父元素背景覆盖：亮色模式下，父级section设置了bg-white背景色，而背景图片所在的div设置了z-index: -1，按照堆叠上下文顺序，父元素背景优先级高于z-index为负的子元素，导致图片被白色背景完全遮挡。
2. 遮罩层叠加遮挡：亮色模式下，遮罩层使用bg-white bg-opacity-50，叠加在图片上方后，进一步弱化了图片可见性，最终导致图片完全无法显示。

修复步骤 #

1. 移除亮色模式下父元素的白色背景

修改HeroSection.vue中section的类绑定，仅在暗色模式下保留黑色背景：

<section
  class="relative w-full h-screen min-h-[500px] flex items-center justify-center text-center"
  :class="[isDarkMode ? 'bg-black' : '']"
  style="height: 100vh"
>

2. 优化背景图片选择器权重

将样式中的div .hero-image改为.hero-image，避免选择器匹配范围错误：

.hero-image {
  background-image: url("/images/tech-girl.jpg") !important;
  background-size: cover !important;
  background-position: center;
  width: 100%;
  height: 100%;
  z-index: -1;
}

3. 调整堆叠层级（可选）

若希望遮罩层保持半透明效果且不影响图片显示，可给遮罩层设置z-index: 1，确保它在图片上方但不会完全遮挡：

<div
  class="absolute bg-opacity-50 w-full h-full z-1"
  :class="[isDarkMode ? 'bg-black' : 'bg-white']"
></div>

验证效果 #

修改后，亮色模式下父元素无背景色，背景图片会显示在最底层，上方的半透明遮罩层仅会淡化图片而不会完全遮挡；暗色模式下的黑色背景和遮罩层依然正常工作。

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