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

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。