See the Pen Frosted glass background by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
テキストの乗っているレイヤーを、擦りガラスで透かしたような表現を作っています。
CSS(Sass)
HTMLはごくシンプルなのでCSSの要点箇所について。
body,section:before{background:url("***.jpg");background-position:center;background-size:cover;background-attachment:fixed;}section:before{content:"";z-index:-1;-webkit-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px);position:absolute;width:100%;height:100%;margin:0;padding:0;}まず bodyと section:beforeに同一の背景画像を設定しています。
次に section:beforeのみにCSSフィルター filter:blurを設定しぼかしています。
sectionではなく section:beforeに背景を設定しているのが要です。
sectionに blurを設定するとテキストなど中の要素すべてがぼけてしまうため、 section:beforeにぼかした背景を設定し section本体の後ろに重ねる形にする手法で実現しています。