mix-blend-mode:difference不生效及背景图遮挡子元素问题求助

一、修正媒体查询选择器错误 #

你写的媒体查询里用了.h1，但你的h1标签没有类名，直接用h1选择器即可：

@media screen and (max-width: 1200px) {
  h1 {
    mix-blend-mode: difference;
  }
}

二、解决背景图遮挡内容的问题 #

你的.bg-image作为父容器，背景图本应在子元素（h1、Nav）下方，出现遮挡大概率是float: right干扰了布局层级。调整如下：

1. 移除.bg-image的float: right属性
2. 给.bg-image设置position: relative（强化层级关系，确保子元素天然在背景之上）

修改后的CSS：

.bg-image {
  background: url("img/compressed/Website Cover_Open_NoBG.png") no-repeat bottom right;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: relative;
}

调整后子元素里的h1和Nav会自然显示在背景图上方，无需额外设置z-index。

三、替代方案：用img标签实现混合模式 #

如果不想用CSS背景图，可直接用img标签作为背景层，步骤如下：

1. 调整组件结构，将img与header-container放在同一层级
2. 给父容器.bg-image设置position: relative
3. 给img设置绝对定位与负z-index，让它成为背景层

修改后的组件代码：

const PageHeader = () => {
  return (
    <motion.div
      id="header"
      variants={imgFade}
      initial="hidden"
      animate="show"
      className="bg-image"
    >
      <motion.img
        variants={imgFade}
        initial="hidden"
        animate="show"
        src="img/compressed/Website Cover_Open_NoBG.png"
        alt="背景图"
        className="bg-img"
      />
      <div className="header-container">
        <div className="title-container">
          <motion.h1
            variants={textAnimate(0.7)}
            initial="hidden"
            animate="show"
          >
            FNAME
          </motion.h1>
        </div>
        <br />
        <div className="title-container">
          <motion.h1
            variants={textAnimate(0.8)}
            initial="hidden"
            animate="show"
          >
            SNAME
          </motion.h1>
        </div>
        <Nav />
      </div>
    </motion.div>
  );
};

export default PageHeader;

对应的新增CSS：

.bg-image {
  width: 100%;
  height: 100%;
  position: relative;
}

.bg-img {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  max-width: 100%;
  height: auto;
}

这种方式和CSS背景图效果一致，同样能让h1的mix-blend-mode正常作用于背景图。

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