#ИМЯ?

Я пытаюсь заполнить содержимое текста в теге 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 для справки.

Ответы

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

Ответ 2

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

Ответ 3

Чтобы отобразить изображение только на h1, попробуйте сделать это:

.image_clip h1{
 background: url(../images/default.png) repeat;
 -moz-background-clip: text;
 -moz-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

Ответ 4

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

Ответ 5

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