mix-blend-mode混合冲突：如何让文本周边背景与body的#fafaee完全一致

问题原因 #

你当前给<h1>同时设置了#fafaee背景和mix-blend-mode: screen，混合模式会作用于整个<h1>盒子，包括它的背景色，和下层的视频内容做混合计算，最终渲染出来的背景色自然和body的纯#fafaee存在色差。

解决方案 #

分离「纯色背景层」和「文字混合层」，仅让文字参与和视频的混合，背景层保持纯色不做混合，就能让文本周边背景和body色值完全一致。同时修正原代码里的类名拼写错误、无效CSS属性问题。

修改后的代码 #

HTML（仅修正类名匹配问题，结构无变动）

<div>
    <div>
        <!-- 原类名contenedor和CSS的container不匹配，统一改为container -->
        <div class="container">
            <video autoplay loop muted>
                <source src="4K_24.mp4" type="video/mp4">
            </video>
            <h1>mi</h1>
        </div>
        <span class="one h6"></span>
        <span class="two h3"></span>
    </div>
</div>

CSS

body{
  padding:0;
  margin:0;
  width:100%;
  height:100vh; /* 原height:100%不生效，改为100vh撑满视口 */
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fafaee;
  font-family: 'Open Sans', sans-serif;
}

.container{
  position: relative; /* 改为相对定位，作为内部元素的定位父级，避免全局div绝对定位的冲突 */
  width:184px;
  height:106px;
  display:flex;
  justify-content:center;
  align-items:center;
}

video{ 
  width: 100%;
  height: 104px;
  object-fit: fill;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

h1{
  position: relative;
  margin: 0;
  font-size: 80px;
  text-transform: uppercase;
  z-index: 9999;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  /* 去掉h1的背景，只保留文字参与混合 */
  background: transparent;
  mix-blend-mode: screen;
}

/* 新增h1的纯色背景层，不参与混合，和body色值完全一致 */
h1::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fafaee;
  z-index: -1; /* 放在文字下方、视频上方 */
}

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