z-index を指定する際には position に static 以外を指定する必要がありますが、あなたのコードでは #background #content のどちらにもこれが指定されていません。 これがなくても動くのは Firefox のバグのような気がします。 以下解説。 画像編集ソフトでいうところのレイヤーのように、Webページのレンダリングにはスタックコンテキストという概念があり、これは opacity transform などを指定した際や、 position と z-index を組み合わせた場合に作成されます。 要素の重なりについて本気出して考えてみた(z-indexとか何とかとか) – No.1026 スタック文脈 - Web developer guide | MDN 描画順をざっくり書くと、次のようになります。(今回関係するもののみ) z-index がマイナスの
![背景にCSSのfilterを使用すると,前面の文字が表示されない](https://cdn-ak-scissors.b.st-hatena.com/image/square/f6bc393cd0b6bd2196935e603c5d031bd6ca6699/height=288;version=1;width=512/https%3A%2F%2Fcdn.sstatic.net%2FSites%2Fja%2FImg%2Fapple-touch-icon%402.png%3Fv%3D1cfb10b305ca)