Html 基于居中背景图像的字体颜色反转-CSS

我试图重新创建它，使用CSS，文本始终居中，并动态反转背景图像前面的字符

我当前的代码笔示例使用psuedo元素和属性内容，但是我无法将文本居中以匹配上面的图像，它只适用于左对齐的内容

.倒排文本元素{
位置：相对位置；
最大宽度：600px；
保证金：0自动；
}
.倒置的文本元素：在{
背景：url（'https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
背景尺寸：封面；
颜色：#FFFDED；
宽度：240px；
左：120px；
}
.inversed text元素：之前，.inversed text元素：之后{
填充：100px0；
文本缩进：10px；
位置：绝对位置；
空白：nowrap；
ccolor:#99794C；
溢出：隐藏；
字体大小：160px；
内容：attr（数据内容）；
}

HTML:

---

只是不要忘记可访问性

<div class="box">
    Lorem ipsum.
    <span aria-hidden="true">Lorem ipsum.</span>
</div>

乱数假文。
乱数假文。

谢谢-非常好的解决方案请不要忘记可访问性（我将完成我的答案）

<div class="box">
    Lorem ipsum.
    <span>Lorem ipsum.</span>
</div>

.box {
    width: 200px;
    margin: 200px auto;
    height: 400px;
    background-color: #CCC;
    font-size: 8em;
    position: relative;
}
.box span {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    color: #FFF;
}
.box, .box span {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

<div class="box">
    Lorem ipsum.
    <span aria-hidden="true">Lorem ipsum.</span>
</div>