Css 混合混合模式具有2个重叠div，但需要排除文本

我调整了两个元素，它们重叠约25%。 使用混合模式，它可以很好地混合背景和文本

JS fiddle就在这里：

我尝试使用：：before来应用混合模式，但我想不出来

.wrapper{
显示器：flex；
}
.文本{
边缘顶部：30px；
弹性：0.50%；
填充：30px；
背景色：rgba（17,38,59,95）；
混合模式：倍增；
}
h1，
p{
颜色：#fff；
}
.形象{
弹性：0.75%；
左边缘：-25%；
背景：url（“https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=EYJHCBFAWQIOJEYMDD9&auto=format&fit=crop&w=2534&q=80“；
背景尺寸：封面；
混合模式：倍增；
}

欢迎来到这个片段
Lorem ipsum dolor sit amet，奉献精英。这是一种全方位的含铜生命体。你是说，你的大脑是否有明显的缺陷

将文本的背景移动到主包装，然后增加其z索引，以允许图像仅与背景混合。主要技巧是调整渐变的大小，以仅模拟文本的相同背景：

.wrapper{
显示器：flex；
背景：
线性梯度（rgba（17,38,59,95），rgba（17,38,59,95））
左下角/
50%/*widh:50%*/
计算（100%-30px）/*高度：100%-顶部边缘*/
不重复；
}
.文本{
边缘顶部：30px；
弹性：0.50%；
填充：30px；
z指数：2；
}
h1，p{
颜色：#fff；
}
.形象{
弹性：0.75%；
左边缘：-25%；
背景：url（“https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=EYJHCBFAWQIOJEYMDD9&auto=format&fit=crop&w=2534&q=80“；
背景尺寸：封面；
混合模式：倍增；
}
身体{
保证金：0；
}
* {
框大小：边框框；
}

欢迎来到这个片段
Lorem ipsum dolor sit amet，奉献精英。这是一种全方位的含铜生命体。你是说，你的大脑是否有明显的缺陷