使用 CSS 定位和透明度制作“秘密信息”

读者 Brian 最近 发表评论，提出了一个我认为非常棒的想法。

我当时想，如果有一个浮动 div，其中包含秘密信息一半的随机字母，另一半的字母则放在背景图像或其他地方，这样用户就需要滚动到完全正确的位置才能显示完整的信息，那将非常棒。

以下是我的实现方法。此技巧仅使用简单的透明图像和 CSS 定位。

使用 Photoshop 将您的最终信息组合在一起。
在我的示例中，我包含了一条小的“向下滚动”信息，以便用户知道该怎么做。

将将在屏幕上“固定”的字母分开。
我使用了一个简单的图层蒙版来覆盖一半的字母。 请记住关闭白色背景层，然后将其导出为 GIF 或 PNG，以便获得透明度。

以下是我的图层蒙版的样子。

导出其他字母。
现在，您应该能够反转图层蒙版（选择它并在 Photoshop 中按 Command-I），并分离相反的字母。同样，关闭背景层并导出为 GIF 或 PNG。

在 HTML 中创建 DIV
可能有多种方法可以做到这一点，这只是我最初想到的方法。您可能可以为直接的 img 元素提供唯一的 ID 并实现相同的效果。

<div id="fixed-letters">
</div>

<div id="scroll-letters">
</div>

固定的字母获得固定定位，而滚动的字母获得相对定位。
以下是 CSS 代码

#fixed-letters {
	position: fixed;
	top: 200px;
	left: 100px;
	background: url(images/fixed-letters.gif) white no-repeat;
	width: 500px;
	height: 125px;
}

#scroll-letters {
	position: relative;
	top: 1200px;
	left: 100px;
	background: url(images/scroll-letters.gif) top center no-repeat;
	width: 500px;
	height: 825px;
}

以下是它的作用

[实时示例]

[下载示例]
（包含 Photoshop 文件）