Css bulanıklık filtresini kenarları saydamlaşmadan nasıl kullanabilirim?

Bir görüntünün opaklığını korurken bir css blur filtresi kullanmaya çalışıyorum. Aşağıdaki örnekte sadece mavi bir kare olan bir görüntüm var. Bir bulanıklaştırma filtresi uyguladığımda, kenarlar şeffaf hale gelir ve alttaki siyah parçayı görebilirsiniz. Bu saydamlık sunulmadan bulanıklaştırma uygulanmasının herhangi bir yolu var mı? İdeal olarak, yalnızca ortalamadaki açıklığın içinde görünür pikselleri dahil etmesini istiyorum. Anladığım kadarıyla bu örnekte sadece mavi bir kareye dönüşecek, ancak daha az önemsiz olan durumlarda, aradığım sonucu verecek.Css bulanıklık filtresini kenarları saydamlaşmadan nasıl kullanabilirim?

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>

kaynak

2015-09-18 Ivanna

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/

kaynak

2015-09-18 19:10:47 sglazkov

Sorun taşmayı saklamıyor, resmin şeffaf hale getirilmesi ve altındaki siyahı görebilmenizdir. – Ivanna

http://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur – sglazkov