Faire un parent div diviser le webkit n'affecte pas les enfants

Je suis en utilisant un très chics webkit filtre d'arrière-plan des images en niveaux de gris, et passez la souris sur les images couleur.

Voici le filtre

filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;

Comme vous pouvez le voir, il y a même une "transition" de la propriété, de sorte que l'image lisse de la décoloration de la transition en pleine couleur. Le problème que je rencontre est que la div je suis en l'appliquant à des est également l'intéressant texte positionné à l'intérieur de la div, transformant le texte en niveaux de gris. C'est un problème parce que le texte doit être blanc, même lorsqu'il n'est pas survolé.

J'ai essayé de nier le filtre avec un autre sur l'enfant du texte, mais il ne semble pas fonctionner... découvrez le violon

Violon http://jsfiddle.net/yMHm4/1/

source d'informationauteur little tiny man | 2014-03-22

  1. 15

    Ce n'est pas un problème de propriétés de l'héritage, comme vous pouvez le penser.

    La façon dont les filtres de travail rend impossible de fixer changer les attributs dans le fichier CSS: L'élément affecté par le filtre est rendu, tous les enfants sont rendus, et le résultat (comme une image) a le filtre appliqué.

    Donc la seule alternative de gauche sont:

    1) de Modifier le HTML, comme Lowkase suggéré

    2) Dans votre cas, il semble que tout ce que vous voulez faire, le gris est l'image d'arrière-plan. Dans ce cas, vous pouvez laisser le HTML en est, d'afficher l'image dans un pseudo-élément, et d'appliquer le filtre de ce pseudo-élément.

    CSS

    .cell{
    opacity:0.7;
    width:420px;
    height:420px;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

.A1 {
    position: relative;
}
.A1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */ 
    z-index: -1;
}

#text {
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}
.cell:hover {
    opacity:1.0;
}

.A1:hover:before {
    filter: none;
    -webkit-filter: grayscale(0);
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

    violon

    J'ai aussi changé le filtre de flou pour le rendre plus clair le texte n'est pas affectée par le filtre. Depuis que vous avez eu aussi une certaine opacité, le texte avait toujours l'air de grisâtre juste parce que vous avez été voir le gris en dessous.

    Ajout d'un exemple à l'aide de filtre luminosité (webkit)

    démo 2

  2. 1

    Vous avez eu un couple d'erreurs HTML avec votre br, ils doivent être br/non /br.

    La solution suivante prend le conteneur de texte de l'image de la div et le place comme un absolu placé élément:

    http://jsfiddle.net/yMHm4/3/

    #text {
    position:absolute;
    top:10px;
    left:25%;
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}

<div id="container">
    <div id="row">
        <div class="cell A1"></div>
        <div id="text">
            <b>SPINDRIFT KIOSK</b>
            <br/>
            Digital Collage
            <br/>
            <i>Mikey</i>
        </div>        
    </div>
</div>

    Vous pourriez probablement utiliser "non" sélecteurs CSS mais je ne suis pas sûr de la façon de la croix-navigateur amical, ils sont. Cette solution est plus plaine jane façon de le faire.