2021/02/04

CSSでのぼかし表現の方法【現役エンジニアが解説】

PROGRAM

今回は、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ピクセルの度合いでぼかしています。

• facebook
• Tweet
• Read Later