-1

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

更新：我发现了如何做到这一点，实际上它很容易。您必须为您的<section>or提供两个背景图像，<div>然后将想要在“固定”背景中的图像设置为。
例如：
.yoursection { width: xx %; height: xx %; background-image: url(images/backgroundimage.jpg) center center no-repeat fixed, url(images/foregroundimage.jpg) center center no-repeat; }

对我来说工作得很好。

4

3 回答 3

0

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

于 2013-07-29T08:28:02.767 回答
0

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

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

基本上，使用 Skrollr，您可以进行改造。缩放，倾斜和旋转任何元素，所有这些都在图层中完成，并且过渡很平滑。所以基本上我会说只是找到一个关于使用 Skrollr 的教程（或只是实验），创建你的元素，在这种情况下，它是一个带有透明文本的背景，然后是透明文本背景元素下方的另一个背景图像。

于 2013-07-29T08:35:39.893 回答
0

您正在观看的透明文本不是文本而是实心图像

这是它的链接

http://www.chevalblanc.com/randheli/medias/images/intro/1400/maskintro-en.png

对于滚动，有一个名为snapscroll的插件

于 2013-07-29T08:43:04.047 回答