背景画像だけにブラーを適用させ、中の要素には影響しないCSS
CSSで背景要素だけにブラーエフェクトを加える方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*背景画像の設定をする*/ .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で一番下する。
