Css 从背景混合模式中排除某些部分

我试图在我的项目中通过代码实现类似于Photoshop乘法的效果。同时，我试图排除childdiv中的一些元素，使其受到文本层的影响，我击中了墙。已尝试添加其他div设置不同的z索引或使用绝对位置

您可以找到带有问题示例的pen：

HTML

小结：“Child div”的子元素受乘法的影响。有没有办法防止这种情况发生

截图：

---

使用伪元素作为背景以避免出现以下情况：

.内部{ 文本对齐：居中； 填充：50px0； 颜色：白色； } 梅因先生{ 背景重复：无重复； 背景图片：url'https://preview.ibb.co/fMY2f9/Bg1.jpg'; 背景尺寸：封面； 位置：相对位置； z指数：0； } .main：：之前{ 内容：； 位置：绝对位置； z指数：-1； 排名：0； 左：0； 右：0； 底部：0； 背景：0079ff； 混合模式：倍增； } 某个标题 Lorem ipsum，dolor sit amet Concertetur Adipising Elite。这是一个很好的例子，我们需要一个很好的解释！伊万尼特，奎姆？我是福吉亚代表团的一员，多洛雷斯

---

请把你的密码贴在这里。签出以确保您遵循指导原则-您需要一个最少的示例。我们无法调试图像，我们需要重现所述问题的代码。是的。我提前发表了一点-我的坏：。我现在提供了所有必要的信息。谢谢，是的，这个问题已经解决了。字体渲染有一些奇怪的错误。有时图层顶部的字体无法正确渲染，但删除背面可见性解决了此问题。

<div class="main">
  <div class="inner">
    <h1>Some header</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia eligendi est eius unde autem dolore adipisci perspiciatis laboriosam reiciendis placeat! Eveniet, quam? Vitae sit saepe quam delectus fugiat, dolores necessitatibus.</p>
  </div>
</div>

.inner {
  text-align: center;
  padding: 50px 0;
  background: #0079ff;
     mix-blend-mode: multiply;
    backface-visibility: hidden;
  color: white;
}

.main {
  background-repeat: no-repeat;
  background-image: url('https://preview.ibb.co/fMY2f9/Bg1.jpg');
  background-size: cover;
}