HTML: Как я могу сделать типографскую вырезку?

Question

Я хотел бы иметь div-z-index div, показывающий фильм (flash или HTML5, что угодно), и второй div с высоким z-индексом, который является белым с некоторым текстом, который «вырезает белый», чтобы просмотреть к фильму.

Другими словами, как будто вы напечатали Hello на большом шрифте на листе бумаги, затем взяли Xacto-нож и тщательно вырезали каждую часть Hello как трафарет, а затем наклеили эту бумагу на экране телевизора. Вы увидите движущиеся цвета телевизора в слове Hello.

Меня интересует любой способ сделать это в браузере, и это необязательно должно быть только для CSS или работать со старым IE. Он просто должен работать с «современными» браузерами, такими как Webkit.

Answer 1

Что вы хотите, это mask.

В «нормальном» HTML это невозможно (или, по крайней мере, не легко). Традиционный HTML не делает такого рода цифровое изображение. Раньше вы могли использовать Flash для таких вещей. Однако теперь у нас есть тег canvas.

Основная идея состоит в том, что у вас будет два уровня HTML: (1) ваш фильм; (2) тег холста. Тэг canvas будет охватывать фильм. На холсте будет создан белый прямоугольник (затенение фильма) и текст (который будет действовать как маска против белого прямоугольника). Маска будет «пробивать» белый прямоугольник, и вы увидите, что фильм позади.

Вот пример делает что-то похожее на то, что вы хотите:

• http://blog.ericzhang.com/punch-through-text-masks-with-css-and-html5/