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
Vous devez vous connecter pour publier un commentaire.
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
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
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/
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.