More than 3 years have passed since last update.

画像をぼかす方法(超簡単)

Posted at 2020-10-18

#簡単！背景画像をぼかす方法

#CSSに一言だけ付け足せばOK!

index.html.erb

<%= image_tag "star.webp", class:"bgimage" %>

##上記のclass名はお好みで！次はCSS!!

○○.css

.bgimage{
  filter: blur(5px);
  width: 100%;
}

##上記の通りfilter: blur(5px);を追加すればOK!
##5pxとなっていますが、1にするにも10にするにもぼかしの濃さを調整できますのでお好みで！

widthは100%にしておくと画面幅がぴったりになると思うのでこちらも忘れずに！

#現場からは以上です！