CSSで背景要素だけにブラーエフェクトを加える
背景画像だけにブラーを適用させ、中の要素には影響しないCSS
ページコンテンツ
CSSで背景要素だけにブラーエフェクトを加える方法
/*背景画像の設定をする*/
.bgImage{
background: url(../images/hogehoge.png) no-repeat center;
background-size: cover;
position: relative;
z-index: 0;
overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
}
/*:beforeにぼかし効果を設定する*/
.bgImage::before{
content: '';
background: inherit;/*.bgImageで設定した背景画像を継承する*/
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position: absolute;
/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;/*重なり順序を一番下にしておく*/
}
ブラーエフェクトは擬似要素に設定する
ブラーエフェクトは「::before擬似要素」に設定して中の要素にまでブラーエフェクトが効いてしまうのを回避する
画像を大きめに引き伸ばし、端のぼやけた部分をカット
ぼかしをかけた分だけ、画像の端までボヤけてしまうので、ぼかす分だけ大きいサイズの画像を用意し、その上で端を切り落とす。
最後にはみ出した部分はoverflow: hidden;で非表示にする。
ブラーエフェクトがかかった擬似要素は一番下にする
ブラーエフェクトがかかった擬似要素にはposition: absolute;を設定しているため、z-indexで一番下する。
