背景にCSSのfilterを使用すると，前面の文字が表示されない

背景要素にfilter: brightnessを使い，明度を暗くした後，その前面に白い文字を表示したいと思っています．

#background {
  z-index: -1000;
  
  height: 300px;
  width:  100%;
  
  background-color: #555;

  filter: brightness(20%);
  -webkit-filter: brightness(20%);
  -moz-filter: brightness(20%);
  -o-filter: brightness(20%);
}

#content {
  z-index: 1000;
  
  height: 300px;
  width: 100%;
  
  margin-top: -300px;
  color: #FFF;
  
  text-align: center;
}

<div id="background">
</div>
<div id="content">
  <h1>
  テスト
  </h1>
</div>

jsfiddle: http://jsfiddle.net/m5ae4fwt/1/

firefoxでは正常に表示できるのですが，Safari，Chrome等Webkit系では文字が表示されていないようです．
また，-webkit-filter: brightnessを削除することで文字は表示されるようになるのですが，今度はfilterが効きません．

本番環境では，背景として画像を使用したいと思っているため，できればfilter: brightnessを使って明度を下げたいと考えています．

何か良い解決策はないでしょうか？