-moz-background-clip: текст не работает в Firefox

Question

Я пытаюсь заполнить содержимое текста в теге h1 изображением.Следуя моему пониманию ;-), я делаю следующее в html:

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

И в файле 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;
}

Дело в том, что он не даетожидаемый результат ... это текст с изображением в цвете.Изображение отображается на всем фоне div, а не только за текстом.Более того, сам текст по-прежнему в черном цвете.

Я пробую это на Firefox.У меня нет других браузеров.

Я что-то пропустил?

Tks за помощь.

Answer 1

Пока -webkit-background-clip:text существует, -moz-background-clip:text не , поэтому вы не сможете добиться эффекта отсечения в Firefox.(Если нет другого способа, о котором я не могу думать.)

Ни один не делает -moz-text-fill-color, хотя вы могли бы просто использовать color:transparent, пока элемент не имеет ничегоеще (например, границы, -wekbit-text-stroke), которые вы хотите видеть.

Ваш код работает в Chrome и Safari:

• http://jsfiddle.net/7T8am/2/

Однако текст <h1> должен быть прозрачным, поэтому, если какой-либо другой код CSS задает цвет для <h1>, вам необходимо его переопределить.

Answer 2

Согласно стандарту, свойство background-clip (которое, между прочим, реализовано без префикса в Firefox) не имеет значения text.Вы используете проприетарную функцию WebKit, а не стандартное свойство CSS ....

Answer 3

Чтобы получить background-clip: text, чтобы придать ожидаемый вид в Firefox, вы можете использовать этот polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - который заменяет CSS версией SVG в браузерах, отличных от Webkit.[не проверено, но замечено, что работает]

Answer 4

Вы применяете стиль к вмещающему div, а не к тегу h1. Попробуйте изменить свой селектор на .image_clip h1 {your:styles;}, или же вы можете оставить свой CSS таким же и применить класс к h1 с <h1 class="image_clip"></h1>.