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

はじめに

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

スクリーンショット 2017-07-21 3.08.44.png

http://techd.jp/

普段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;
}

参考