背景和透明效果

Question

http://codepen.io/alemarch/pen/yyeOwX

<div id="back">
  bla bla bla bla bla
  bla bla bla bla bla
  bla bla bla bla bla
  bla bla bla bla bla
  bla bla bla bla bla
  bla bla bla bla bla 
</div>
<div id="front">g</div> 

和css

 #back {
  white-space: pre;
  background-color: #000;
  color: 
}

#front {
  margin-top:-170px;
  padding-left: 20px;
  font-size: 150px;
  color: transparent;
  background-color: rgb(255,255,0);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;

  //position: relative;
}

此代码仅适用于chrome ..我问

1. 如何在Firefox中运行？我必须使用svg？
2. 在Chrome中，如何只改变bla bla bla的颜色（现在如果使用bla bla的前景颜色不同的背景颜色，透明效果会丢失）？
3. 为什么，在chrome中，如果我改变位置（前相对）透明效果也会丢失？

感谢。