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

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

 ///////////////////////////////////////////////
 // (пусто) // TITLE IMAGE // (пусто) //
 ///////////////////////////////////////////////

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

EDIT: Для примера эффекта, который я пытаюсь достичь, посмотрите здесь: http://www.showandtell-graphics.com/layer-knockout.html

Solutions Collecting From Web of "Как сделать сквозной прозрачный текст в HTML / CSS?"

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

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

 

Title

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

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

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

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

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