CSS：背景の画像をぼかして表示する

今回はぼかし＋半透明の色を重ねるということをやりたかったのですが、それはできませんでした。。
ひとまず背景の画像をぼかす方法のみメモしておきます。

HTML例

<div class="bg1">
  <p>上に載せたいテキスト</p>
</div>

CSS例

.bg1 {
  background: url(../img/bg.jpg) center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  z-index: 1;
  overflow: hidden;

  &:before {
    z-index: -1;
    content: "";
    display: block;
    position: absolute;
    background: inherit;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
  }
}

参考：CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法