我如何使用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/

Answer 2

试着看看这里:

如何为背景图像应用css3模糊滤镜

https://css-tricks.com/almanac/properties/f/filter/

http://www.inserthtml.com/2012/06/css-filters/<---- (我认为这是非常相似的你正在寻找的。)