HTML:如何制作剪裁排版

HTML: How can I make cut-out typography?

本文关键字：剪裁何制作 HTML 更新时间：2023-09-26

我想有一个显示电影（flash或HTML5等）的低z索引div，以及第二个高z索引div，它是白色的，带有一些"剪切白色"的文本来透视电影。

换句话说，就好像你用大字体在一张纸上打印了Hello，然后拿了一把Xacto刀，像模板一样精心剪下Hello的每个部分，然后将这张纸粘贴在电视屏幕上。您会在"你好"一词中看到电视的移动色彩。

我对在浏览器中执行此操作的任何方法都感兴趣，它不一定是仅CSS的或与旧的IE一起使用。它只需要与"现代"浏览器（如Webkit）一起使用即可。

你想要的是一个面具。

在"普通"HTML中，这是不可能的（或者至少不容易实现）。传统的HTML不会做这种数字成像。在过去，你可能使用Flash来做这样的事情。但是，现在我们有了canvas标签。

基本思想是您将有两个HTML层：（1）您的电影;（2）画布标签。画布标签将覆盖影片。画布上将组成一个白色矩形（遮挡电影）和文本（将充当白色矩形的蒙版）。蒙版将"穿透"白色矩形，您将看到电影在后面播放。

下面是一个执行类似于所需操作的示例：