混合两层文本

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浏览器。

混合两层文本

Blending two layers of text

css

stylus

mix-blend-mode