-moz-background-clip: le texte ne fonctionne pas dans Firefox

Je suis en train de remplir le contenu d'un texte dans une balise h1 par une image.
À la suite de ma compréhension ;-), je suis en train de faire la suite dans le code html:

<div class="image_clip">
 <h1>
  MY WONDERFULL TEXT
 </h1>
</div>

Et dans le fichier css:

.image_clip{
 background: url(../images/default.png) repeat;
 -moz-background-clip: text;
 -moz-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

Le fait est qu'il ne permet pas d'obtenir le résultat attendu... c'est le texte avec l'image que la couleur.
L'image est affichée sur tout l'arrière-plan de la div et pas seulement derrière le texte.
Le texte lui-même est d'ailleurs toujours en noir.

Je suis en train que sur Firefox. N'avez pas d'autres navigateurs.

Ai-je raté quelque chose?

Tks pour l'aider.

source d'informationauteur microcosme | 2012-02-20

  1. 9

    Tandis que -webkit-background-clip:text existe, -moz-background-clip:texte n'est pasdonc vous ne serez pas en mesure d'atteindre votre effet de détourage dans Firefox. (Sauf si il y a une autre façon, je ne pense pas.)

    Ni ne -moz-texte de remplissage-colorbien que vous pouvez simplement utiliser color:transparenttant que l'élément n'a pas autre chose (par exemple, les frontières, -wekbit-text-stroke) que vous souhaitez être visible.

    Votre code ne travail dans Chrome et Safari:

    Cependant, la <h1>texte n'a besoin d'être transparente, de sorte que si un autre code CSS est de définir une couleur pour le <h1>vous aurez besoin de le remplacer.

  2. 2

    Par la norme, le background-clip de propriété (qui est mis en œuvre sans un préfixe dans Firefox, par la voie), n'a pas text valeur. Vous êtes à l'aide d'un propriétaire de WebKit fonction, pas un standard de la propriété CSS....

  3. 1

    Pour afficher l'image uniquement sur h1 essayer de faire ça:

    .image_clip h1{
 background: url(../images/default.png) repeat;
 -moz-background-clip: text;
 -moz-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
  4. 1

    Vous êtes en appliquant le style de la enfermant divpas la h1 tag. Essayez de changer votre sélecteur à .image_clip h1 {your:styles;}ou alternativement, vous pouvez laisser votre CSS du même et de l'appliquer à la classe de la h1 avec <h1 class="image_clip"></h1>.

  5. 1

    Pour obtenir background-clip:du texte pour donner l'anticipation de l'apparence de Firefox, vous pouvez utiliser cette polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - qui remplace le CSS avec une version SVG non les navigateurs Webkit. [non testé mais vu travailler]