2010-08-30 12 views
5

Sto usando -webkit-background-clip per limitare un'immagine di sfondo al testo in un elemento h2.CSS3 background-clip

La mia domanda è, fa la funzione -moz-background-clip allo stesso modo? Questo sembra funzionare solo nei browser WebKit, il che suggerisce che non funziona ancora in Firefox:

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

Attualmente, in Firefox, il testo è nascosto (per il colore: trasparente e il testo-fill-color: proprietà trasparenti) e solo l'immagine di sfondo e il colore sono visibili nella forma rettangolare dell'elemento.

Qualche idea?

risposta

2

Non credo che text sia un valore valido per la proprietà background-clip.

MDC indica due diverse dichiarazioni, una per Firefox 3.6 e versioni successive, e l'altra per l'imminente Firefox 4. Indica anche l'equivalente del webkit.

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 

Vedi il documento MDC qui: https://developer.mozilla.org/en/CSS/background-clip

Quanto a ciò che si sta cercando di raggiungere, credo che il valore content-box è quello che stai cercando. Si noti che Firefox 3.6 e versioni successive non sembrano supportare questo valore.

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

+0

Interessante. Un valore di 'testo' nei browser Webkit è stato in grado di ottenere questo risultato (ingrandito): http://cl.ly/2Ame. Deve essere completamente proprietario di Webkit per ora, quindi. L'uso di content-box non funziona: restituisce lo stesso identico risultato, eliminando del tutto la clip di sfondo. Questo dovrebbe comportarsi in modo diverso? Grazie per aver risposto. – Gavin

+0

'content-box' non è la stessa cosa di' text' http://dabblet.com/gist/3180315 –