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

Question

I'm trying to use a css blur filter while maintaining the opacity of an image. In the example below I have an image that is just a blue square. When I apply a blur filter the edges end up becoming transparent and you can see the black div underneath. Is there any way to apply blurring without this transparency being introduced? Ideally, I would want it to only include visible pixels inside of the span in the averaging. I understand that in this example it would result in just a solid blue square but for less trivial cases it would give the result that 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>

Answer 1

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/