-moz-background-clip:text funktioniert nicht in Firefox

Ich versuche, füllen Sie den Inhalt von einem text in einem h1-tag durch ein Bild.
Nach meinem Verständnis ; -) mache ich Folgendes in der html:

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

Und in der css-Datei:

.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;
}

Tatsache ist, dass es keine Ausbeute das erwartete Ergebnis... das ist der text mit dem Bild in es als Farbe.
Das Bild wird auf den gesamten hintergrund des div und nicht nur hinter dem text.
Der text selbst ist außerdem noch in schwarz.

Ich versuche, auf Firefox. Nicht über andere Browser.

Habe ich etwas verpasst?

Tks für die Hilfe.

Folgende w3schools.com/cssref/css3_pr_background-clip.asp 'text' wird nicht unterstützt als Wert der 'background-clip'. Wo hast du das gefunden, dass 'background-clip: text' Verbindung?
hier: webkit.org/blog/164/background-clip-text
-webkit-background-clip:text vorhanden ist, aber -moz-background-clip:text nicht; siehe developer.mozilla.org/en/CSS/-moz-background-clip

InformationsquelleAutor microcosme | 2012-02-20

  1. 10

    Während -webkit-background-clip:text existiert, -moz-background-clip:text nicht, so dass Sie nicht in der Lage sein, um Ihre clipping-Effekt in Firefox. (Es sei denn, es gibt einen anderen Weg kann ich nicht denken.)

    Weder -moz-text-fill-color, obwohl Sie konnte einfach color:transparent, solange das element nicht über etwas anderes (z.B. Grenzen, -wekbit-text-stroke), die Sie sichtbar sein sollen.

    Ihren code hat Arbeit in Chrome und Safari:

    Jedoch die <h1>'s text muss transparent sein, so dass, wenn alle anderen CSS-code festlegen einer Farbe für die <h1> werden Sie brauchen, um es zu überschreiben.

    Paul hat Recht, und der Geige zeigt OP-markup funktioniert in Chrome für mich.

    InformationsquelleAutor Paul D. Waite

  2. 4

    Pro standard, der background-clip - Eigenschaft (, die umgesetzt werden, ohne ein Präfix in Firefox, übrigens), nicht text Wert. Sie verwenden eine proprietäre WebKit-Funktion, nicht eine standard-CSS-Eigenschaft....

    InformationsquelleAutor Boris Zbarsky

  3. 1

    Bewerben Sie den Stil der umgebenden div, nicht die h1 tag. Versuchen Sie, Ihre Auswahl, um sein .image_clip h1 {your:styles;} oder alternativ können Sie Ihre CSS die gleichen und wenden Sie die Klasse, um die h1 mit <h1 class="image_clip"></h1>.

    InformationsquelleAutor Ryan

  4. 1

    Erhalten background-clip:text zu geben, die erwarteten Auftritt in Firefox können Sie diese polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - ersetzt, dass die CSS mit einer SVG-version in nicht-Webkit-Browser. [ungetestet, aber gesehen arbeiten]

    InformationsquelleAutor pbhj

Schreibe einen Kommentar