2018-10-14

CSS filter - 画像をぼかす

CSS
Filter

filter: blur で画像をぼかす

画像をぼかしてみます。

blur 関数

ねこ画像にblur関数でぼかしをかけてみます。
関数への引数はぼかしの半径です。10px でもかなりボケますね。em%などの相対指定も可能です。

<img class="blur" src="/images/site/cat.svg" title="SVGねこ" />  
/* filterでぼかし */  
.filter-blur {  
  filter: blur(10px);  
}  
.filter-blur:hover {  
  filter: blur(0px);  
}  

filter:blur リファレンス

MDN のサイトが参考になります。
blur()

ねこ画像 by 素材 Library.com, Thanks!!


猫派 / 基本インドア / ガジェット大好き / RDP推進派 / 自作キーボード
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:Factorio / にゃんこ大戦争

→ Policy