CSSで画像にぼかし（ブラー）をかける方法

CSSで画像にブラーをかける方法

クラス付与でぼかしを入れる方法は、

HTML.css

.blur{
  -ms-filter: blur(6px);
      filter: blur(6px);
}

と定義すればOK。

背景だけにブラーをかけたい場合は、beforeを用いて、

HTML.css

.blur{
  background: url(imageURL) no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.blur:before{
  content: '';
  z-index: -1;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(５px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}