CSSでのぼかし表現の方法【現役エンジニアが解説】
今回は、CSSでのぼかし表現の方法について、全体をぼかす方法と背景のみをぼかす方法に分け、簡単に解説していきます。
全体をぼかす
全体をぼかすには、filterプロパティを使います。
ぼかす対象の要素のfilterプロパティの値をblur(ぼかしの半径)にします。
.hoge{ -ms-filter:blur(5px); filter:blur(5px); }
上記のコードでは、hogeのクラスの要素全体を半径5ピクセルの度合いでぼかしています。
背景のみをぼかす
背景のみをぼかす際にも、filterプロパティを使用します。
ただし、filterプロパティを使う対象は要素の:beforeの擬似要素になります。
.hoge{ width:500px; height:500px; background:url(hoge.jpg); position:relative; z-index:0; overflow:hidden; } .hoge:before{ content:''; background:inherit; -webkit-filter:blur(5px); -moz-filter:blur(5px); -ms-filter:blur(5px); -o-filter:blur(5px); filter:blur(5px); position:absolute; top:-5px; right:-5px; bottom:-5px; left:-5px; z-index:-1; }
上記のコードでは、hogeというクラスの要素の背景を、半径5ピクセルの度合いでぼかしています。
背景のみをぼかすより簡単な方法
filterの代わりにbackdrop-filterプロパティでも背景のみをぼかせます。
注意点としては、このbackdrop-filiterプロパティはIEやFirefoxでは使うことができません。
.hoge{ width:500px; height:500px; background:url(hoge.jpg); position:relative; z-index:0; overflow:hidden; } .hoge:before{ content:''; backdrop-filter:blur(5px); position:absolute; top:-5px; right:-5px; bottom:-5px; left:-5px; z-index:-1; }
上記のコードでは、hogeというクラスを持つ要素の背景を、半径5ピクセルの度合いでぼかしています。