如何在没有边缘透明的情况下使用css模糊滤镜？

Question

我正在尝试使用css模糊滤镜,同时保持图像的不透明度.在下面的示例中,我有一个只是蓝色方块的图像.当我应用模糊滤镜时,边缘最终变为透明,您可以看到下面的黑色div.如果没有引入透明度,有没有办法应用模糊？理想情况下,我希望它只在平均中包含跨度内的可见像素.我知道在这个例子中它只会产生一个稳定的蓝色方块,但对于不那么简单的情况,它会给出我正在寻找的结果.

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/