Как сделать прозрачный сквозной текст в HTML / CSS?

Question

У меня есть div, который имеет css background: rgba(0, 0, 0, 0.85);.В центре этого div находится заголовок страницы.Я хочу, чтобы заголовок был прозрачным (нокаут, пробивка, как бы вы ни называли его, т. Е. За черным фоном div на фоновое изображение страницы).Единственный способ сделать это - использовать изображение с фоном div и прозрачным текстом и разделить часть заголовка на блоки.

///////////////////////////////////////////////
//  (empty)    //  TITLE IMAGE //   (empty)  //
///////////////////////////////////////////////

Проблема в том, что я не знаю, как создатьпустые элементы div, чтобы изображение оставалось по центру (необходимо добавить пустые элементы div для добавления черного фона).Есть ли другой способ сделать прозрачный текст, у которого нет этой проблемы, или способ центрировать изображение div с пустыми div?

РЕДАКТИРОВАТЬ: Пример эффекта, которого я пытаюсь достичь, смотрите здесь: http://www.showandtell -graphics.com / layer-knockout.html

Answer 1

вы не можете сделать это напрямую; Вы должны использовать изображение для этого, иначе svg может сработать, но это намного сложнее, и браузеры не все так хорошо его поддерживают.

Answer 2

Вы должны просто быть в состоянии сделать это

<div> 
    <h1>Title</h1>
</div>

Поместите background-image на div

h1 будет прозрачным по умолчанию.

Чтобы центрировать заголовок, используйте text-align:center

Для центрирования фонового изображения вы можете использовать background-position:center

Пример: http://jsfiddle.net/jasongennaro/EQDZd/