CSSフィルター：背景の一部をぼかす表現

See the Pen nhstF 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 本体にフィットさせ、それだけに背景画像を設定しぼかすという手法です。