Question

我想知道如何创建文本下显示的背景图像的效果。这是一个例子：chevalblanc.com。我想象两个<sections>，第一个有剪切文本背景图像，第二个部分有一张照片或背景中的东西。我注意到他们用png“切出”字母并将其用作背景，但是如何创建滚动效果呢？

更新：我发现了怎么做，实际上很容易。您必须向<section>或<div>提供两张背景图片，然后在“固定”的背景中设置您想要的图像。
例如：
{{ 1}}

对我来说很好。

Answer 1

这是纯粹由CSS3和Jquery组合而成。是的我可以看到他们正在使用png透明蒙版（mask05.png）。要回答您的问题如何实现滚动，请通读http://24ways.org/2010/intro-to-css-3d-transforms/

Answer 2

CSS 3D变换的替代方案是使用视差滚动（下面的示例）

http://prinzhorn.github.io/skrollr/

基本上，使用Skrollr可以进行转换。缩放，倾斜和旋转任何元素，所有元素都完成并且过渡是平滑的。所以基本上我只想找一个关于Skrollr（或者只是实验）的使用的教程，创建你的元素，在这个实例中是透明文本的背景，然后是透明文本背景元素下面的另一个背景图像。

Answer 3

您正在观看的透明文字不是文本，它是一个实心图像

这是一个链接

并且对于滚动，有一个名为snapscroll

的插件