Css &引用；倒置；灰度背景图像上的文本颜色从黑色变为白色

我想达到的效果，根据所附的图像（通过）

我试过使用

混合模式：差（和其他变体），但很明显，这也会反转背景图像，而我只想随着背景的变化更改字体颜色。我无法立即看到如何通过CSS实现这一点。在检查了网站本身（）之后，我仍然看不出设计师是如何在CSS中实现这一点的

如何做到这一点

在查看页面时，设计师会在视觉上欺骗你。实际上那篇文章有两份不同的副本。一个在图像显示块内部，一个在外部。外面的那个在它下面，是黑色的。里面的一个是白色的，但是图像容器上的
溢出：隐藏
限制了它

通过仔细地将文本对齐到被截断的位置，您可以看到这种效果

下面是一个快速的示例来演示该技术。（注意：由于这只是一个演示，我没有让它在手机上很好地播放。）

JS Bin示例：
如果您事先知道图像的宽度，您可以尝试以下方法

第一个背景用于为图像内的文本着色，第二个背景用于文本的其余部分


div{
/*垂直和水平居中文本的步骤*/
显示器：flex；
背景：url(https://picsum.photos/200/300)中心不重复；
填充：50px；
}
h1{
/*垂直和水平居中文本的步骤*/
保证金：自动；
背景：线性梯度（白色，白色）中心/200px 100%无重复，黑色；
-webkit背景剪辑：文本；
颜色：透明；
}

我不是头球冠军
我还没打算写帖子。。。JSBin示例即将发布。神奇！好地方。