CSS3 background-clip

Question

Ich verwende -webkit-background-clip, um ein Hintergrundbild auf den Text in einem h2-Element zu beschränken.

Meine Frage ist, funktioniert -moz-Hintergrund-Clip-Funktion auf die gleiche Weise? Dies scheint nur in Webkit-Browsern zu arbeiten, die es funktioniert noch nicht in Firefox schlägt vor:

#header h1 a{ 
    background: url(img/logo-overlay.png) no-repeat #000; 
    -moz-background-clip: text; -webkit-background-clip: text; 
    color: transparent; -moz-text-fill-color: transparent; -webkit-text-fill-color: transparent; 
    text-decoration: none; 
} 

Derzeit in Firefox, wird der Text verborgen (wegen der Farbe: transparent und Text-fill-color: transparente Eigenschaften) und nur das Hintergrundbild und die Farbe sind in der rechteckigen Form des Elements sichtbar.

Irgendwelche Ideen?

Answer 1

Ich glaube nicht, text ist ein gültiger Wert für die background-clip Eigenschaft.

MDC gibt zwei verschiedene Deklarationen an, eine für Firefox 3.6 und darunter und die andere für den kommenden Firefox 4. Es gibt auch das Webkit-Äquivalent an.

Firefox (Gecko)  
1.0-3.6 (1.2-1.9.2) -moz-background-clip: padding | border 
4.0 (2.0)    background-clip:  padding-box | border-box | content-box 

Safari (WebKit) 
3.0 (522)    -webkit-background-clip: padding | border | content 

das MDC Dokument Siehe hier: https://developer.mozilla.org/en/CSS/background-clip

Betreffs, was Sie versuchen zu erreichen, glaube ich, die content-box Wert ist das, was Sie suchen. Beachten Sie, dass Firefox 3.6 und darunter diesen Wert nicht unterstützen.

Siehe: http://www.css3.info/preview/background-origin-and-background-clip/