How to blur an image (super easy)

Easy! How to blur the background image

144f999b1a92884d6f066877ca4bb31e.jpg

Just add a word to your CSS and you're good to go!

java:index.html.erb


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

The above class name is your choice! Next is CSS !!

○○.css


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

As mentioned above, add filter: blur (5px); </ font> and it's OK!

It is 5px </ font>, but you can adjust the blur depth to 1 or 10 so you can use it as you like!

If you set the width to 100%, the screen width will be perfect, so don't forget this too!

That's all from the scene!

Recommended Posts