混合两层文字

Question

我正在尝试将两层文本混合在一起，其中两个图层都是白色，但在两个单词彼此重叠的部分上，我希望这些单词与背景颜色相同。

我开始使用mix-blend-mode。

它只需要在最后一个版本的浏览器中工作（更别说ie）

http://codepen.io/SusanneLundblad/pen/bEopPw?editors=110

.wrap
  display: flex
  justify-content: center
  align-items: center

h1,h2
  font-family: 'Limelight', cursive;
  text-transform: uppercase

 h1
  font-size: 400px
  color: white
  //mix-blend-mode: overlay
h2
  color: #282828
  position: absolute
  font-size: 200px
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)

如果有人有任何建议，我会非常高兴！

Answer 1

你可以通过使用svg作为背景和

来实现

-webkit-background-clip: text;

属性。

更新：http://codepen.io/anon/pen/gPGmLo

注意：代码仅支持webkit浏览器。