CSS：背景の一部をぼかす表現

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 本体の後ろに重ねる形にする手法で実現しています。