css - 混合两层文本

Question

我正在尝试将两层文本混合在一起，两层都是白色的，但是在两个单词相互重叠的部分，我希望单词与背景具有相同的颜色。

我已经开始玩混合混合模式了。

它只需要在浏览器的最新版本中工作（没关系，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 浏览器。