HTML:我如何制作剪切排版?

时间:2013-11-17 23:43:50

标签: javascript html css typography

我想有一个低z-index div显示一个电影(flash或HTML5,无论如何),还有一个第二个高z-index div是白色的,带有一些文字“切出白色”看到直到电影。

换句话说,就像你在一张纸上用大字体打印Hello一样,然后拿着一把Xacto-knife,仔细地将Hello的每个部分切成模板,然后将这张纸贴在电视屏幕上。您会在单词Hello中看到电视的移动颜色。

我对在浏览器中执行此操作的任何方式感兴趣,并且它不一定必须是仅CSS或与旧IE一起使用。它只需要使用像Webkit这样的“现代”浏览器。

1 个答案:

答案 0 :(得分:1)

你想要的是mask

在“普通”HTML中,这是不可能的(或者至少不可能)。传统的HTML不会这样做这种数字成像。在过去,您可能已经使用Flash这样的东西。但是,现在我们有canvas标记。

基本思想是你将有两个HTML图层:(1)你的电影; (2)画布标签。 canvas标签将覆盖电影。在画布上将组成一个白色矩形(遮蔽电影)和文本(它将作为白色矩形的掩码)。面具将“穿透”白色矩形,你会看到电影在后面播放。

这是一个做你想做的事情的例子: