CSSで背景画像にぼかし加工と半透明カラー加工を同時に行う

はじめに

LPなどでよく使われるやつです。こんな感じの完成イメージです。

普段cssを専門に触っているわけではないので、もっと良い方法があればフィードバックください。

実装

::before を使って擬似要素を定義します。

::before (:before)
https://developer.mozilla.org/ja/docs/Web/CSS/::before

例えば、topというクラスを持つdiv要素を対象とする場合、以下のように定義するのがポイントです。

• top::before
  • カラー
• top
  • 画像のURL
  • カラーの透明度
  • ぼかし度

htmlとcssのサンプルは以下の通りです。

<div class="top"></div>

.top{
  z-index:0;
  overflow: hidden;
  background-color: rgb(0,163,175);/*半透明カラーの色*/
}

.top::before{
  content: '';
  background: url('../../assets/img/hogehoge.jpg');/*背景画像のURL*/
  opacity: 0.5;/*半透明カラーの透明度*/
  filter: blur(8px);/*ぼかし度*/
  position: absolute;
  /* 参考: http://designcolor-web.com/2016/09/14/css-blur-effects-background/*/
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  z-index: -1;
}

参考

• http://designcolor-web.com/2016/09/14/css-blur-effects-background/
• https://developer.mozilla.org/ja/docs/Web/CSS/::before