Bonjour à tous, je viens ici car je n'ai pas trouver de réponse exacte à mon problème dans les différents tutoriaux/forums sur le net (peut-être ai-je mal cherché).

Voici mon problème : J'ai une div parent nommée "bg-partageur" qui correspond donc au background d'un bout de la page, j'ai lui ai appliqué un flou comme sur ma maquette graphique, tout cela fonctionne. Mais une fois que j'insère une div enfant -"profil-partageur" dans bg-partageur, l'effet de flou s'applique aussi à l'enfant empêchant toute lecture de l'information. Voici mon code HTML

<section class="vbox">
<div class="bg-partageur col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="col-lg-2 col-md-2 col-sm-0 col-xs-0"></div>
    <div class="profil-partageur col-lg-8 col-md-8 col-sm-12 col-xs-12 m-t-xl">
        <span class="col-lg-2 col-md-2 col-sm-2 col-xs-3">
            <img src="images/avatar.jpg" class="img-circle">
        </span>
        <div class="info-profil v-middle col-lg-7 col-md-7 col-sm-6 col-xs-5">
            <h1>Perle-Anne</h1>
            <p>158m, Rue du sergent Blandan, Nancy</p>
            <button class="btn m-b-md">
                <span class="text">
                    <i class="fa fa-heart"></i>Modifier mon profil
                </span>
            </button>
            </div>
            <div class="rating col-lg-3 col-md-3 col-sm-3 col-xs-3 m-t-md">
            <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i><p>17 avis</p>
            </div>
        </div>   
</div>
</section>

Et mon CSS

.bg-partageur {
background-image:url("../images/bananes.png"); 
background-repeat:no-repeat; 
background-position:center center;
background-size:2000px;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
padding-bottom:40px;
}

.profil-partageur {
height:auto;
border:1px solid white;
color:#fff;
padding:10px 10px ;
background:transparent;
}

.profil-partageur img{
border:1px solid white;
width:100px;;
}

Voici le résultat attendu : http://www.hostingpics.net/viewer.php?id=182619original.jpg

Voici le résultat obtenu : http://www.hostingpics.net/viewer.php?id=405235rsultat.jpg

Voilà en espérant que vous saurez trouver réponse à mon problème, précisez-moi si jamais il vous manque certains éléments pour me répondre.

Merci d'avance et bonne journée :)!

7 réponses


heu et simplement en mettant dans le css de l'enfant ton effet de flou à 0 ça ne marcherai pas?

je vois pas de soucis ^^

http://jsfiddle.net/5xZGf/

Alors, flo3376, cela ne fonctionne hélas pas.

Glaived, je suppose que tu utilises Firefox :). Car sur Google Chrome le flou s'applique aussi à la div enfant.

http://jsfiddle.net/5xZGf/2/

Pas compatible avec Firefox (et IE ?), enfin ya bien cette méthode http://css-plus.com/2012/03/gaussian-blur/ (Voir "CSS Blur Filter")

Heum heum la méthode avec text-shadow est un peu trop "sale" à mon goût, je suis à la recherche d'une technique propre et claire (je suis sûr qu'elle existe!) afin de pouvoir la réutiliser d'autre fois, mais merci :)

  • Tu t'es tromper de solution, la solution dans le dit site ne passe par du text-shadow
  • Grafikart en parlais, sur un projet il en avais besoin, mais il avais pas trouvé de solution

Oui je viens de voir, mais ça n'empêche que le site ne résout pas mon problème il montre juste un effet blur direct sur un hover ou en progressif..

J'ai peut-être trouvé une solution mais qui n'est pas encore aboutie, je vous en fait part une fois que je suis certain du résultat.

Si jamais d'autres idées vous venez entre temps n'hésitez pas!

Encore merci