CSS3 фон-клип

Question

Я использую -webkit-background-clip, чтобы ограничить фоновое изображение текстом в элементе h2.

Мой вопрос: -moz-background-clip работает так же? Кажется, что это работает только в браузерах webkit, что говорит о том, что оно еще не работает в 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;
}

В настоящее время в Firefox текст скрыт (из-за свойств color: transparent и text-fill-color: transparent) и только прямоугольное изображение и цвет видны в прямоугольной форме элемента.

Есть идеи?

Answer 1

Я не верю, что text является допустимым значением свойства background-clip.

MDC заявляет два разных объявления, одно для Firefox 3.6 и ниже, а другое для предстоящего Firefox 4. В нем также указывается эквивалент веб-набора.

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

См. Документ MDC здесь: https://developer.mozilla.org/en/CSS/background-clip

Что касается того, чего вы пытаетесь достичь, я считаю, что значение content-box - это то, что вы ищете.Обратите внимание, что Firefox 3.6 и ниже не поддерживает это значение.

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

Answer 2

text теперь является экспериментальным API для background-clip, который окрашивает фон внутри текста переднего плана.

Firefox, Chrome и Safari поддерживают неофициальный -webkit-background-clip: текст (только с префиксом)

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip