Geek Answers Handbook

How can I use css blur filter without the edges becoming transparent?

I am trying to use css blur filter while preserving the opacity of the image. In the example below, I have an image that is just a blue square. When I apply a blur filter, the edges become transparent and you can see the black div at the bottom. Is there any way to apply blur without introducing this transparency? Ideally, I would like it to include only visible pixels within the range in averaging. I understand that in this example, this will lead to a simple blue square, but for less trivial cases this will give the result I'm looking for.

div { background-color: black; width: 100px; height: 100px; } span { overflow: hidden; -webkit-filter: blur(30px); display: block; } 
 <div> <span> <img width="100px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/600px-000080_Navy_Blue_Square.svg.png"> </span> </div>
+5
source share
2 answers
 img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); margin: -5px -5px -5px -5px; } div { display: inline-block; overflow: hidden; }

http://jsfiddle.net/serGlazkov/nv6evzmk/

+2
source

More articles:


All Articles