I'm experimenting with adding a CSS blur filter to an image while keeping the opacity intact. When I test it with a simple blue square image, the edges become transparent and reveal the underlying black div. Is there a way to achieve the blur effect without this unwanted transparency? My goal is for the blurring to only affect visible pixels within the span during averaging. While in this case it would result in a solid blue square, in more complex scenarios it would provide the desired outcome.
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>