Comment garder css image d'arrière-plan flou à l'intérieur d'un conteneur?

Quand je le flou d'une image d'elle déborde le conteneur parent, même en spécifiant débordement à être caché.
Est-il un moyen de garder le flou des bords à l'intérieur dimensions?

L'image doit être comme fond de css et non pas à l'intérieur de la balise

Exemple ne fonctionne pas:

.box{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
}

.blur{
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-filter: blur(20px);
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
}

http://jsfiddle.net/tMjsJ/1/

OriginalL'auteur Luccas | 2013-03-08

  1. 8

    Il peut être atteint par l'application d'un margin de l'élément enfant et overflow:hidden à la société mère.

    .box {
    overflow: hidden;
    margin:5px;
}

.blur {
    -webkit-filter: blur(20px);
    margin: -5px 0 0 -5px;
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
    height:300px;
    width:300px;
}

    Voir un exemple ici: http://jsfiddle.net/n1ck/tMjsJ/5/

    Comme Joshua souligné, c'est la même technique utilisée ici: Défini Bords Avec CSS3 Filtre Flou

    Intrigante @n1ck - l'application de TOUTE marge négative semble le faire. Est-ce Webkit version de haslayout problème? 😉

    OriginalL'auteur N1ck

  2. 2

    Donc, apparemment, cela ne semble pas fonctionner sur des images d'arrière-plan. Tout à fait intéressant de trouver 🙂 Un semblable, mais elle n'est pas exacte post a été démontré ici:

    Défini Bords Avec CSS3 Filtre Flou

    J'imagine que si vous voulez obtenir le même effet, essayez de changer d'utiliser un div avec une image de fond à une image de lui-même, à l'aide de la largeur /hauteur de 100%.

    Edit: découvrez @N1ck de réponse. L'application d'une marge négative (1px) œuvres semble déclencher l'effet voulu. Nice.

    Aussi afin d'éviter les saignements de couleur de fond (blanc), ou au moins mieux la gérer, essayez de définir une couleur d'arrière-plan en plus de l'image.

    Merci pour la réponse et les conseils. Pour éviter les saignements le blanc Avec la couleur d'arrière-plan fonctionne, mais c'est un peu moins trivial avec des images d'arrière-plan.

    OriginalL'auteur Joshua