Come posso usare il filtro sfocatura css senza che i bordi diventino trasparenti?

Question

Sto tentando di utilizzare un filtro sfocatura css mantenendo l'opacità di un'immagine. Nell'esempio seguente ho un'immagine che è solo un quadrato blu. Quando applico un filtro sfocatura, i bordi diventano trasparenti e puoi vedere il div nero sotto. C'è un modo per applicare la sfocatura senza che venga introdotta questa trasparenza? Idealmente, vorrei che includesse solo i pixel visibili all'interno dello span nel calcolo della media. Capisco che in questo esempio risulterebbe in un semplice quadrato blu ma per i casi meno banali darebbe il risultato che sto cercando.

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

cercare di guardare lei:

How to apply a CSS 3 blur filter to a background image

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

http://www.inserthtml.com/2012/06/css-filters/ < ---- (Questo penso sia molto simile a quello che stai cercando.)