背景图像上的透明文字

-1

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

更新：我发现怎么做，其实很简单。你必须给你的<section>或<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; }

对我来说工作很好。

来源

2013-07-29 okiedokey

能插件你会更清楚一点吗？ –

这是Parallax滚动。你可以在这里阅读教程与演示http://webdesign.tutsplus.com/tutorials/complete-websites/using-a-parallax-scrolling-website-using-stellar-js/ – designtocode

其不是文字其固体图像http： //www.chevalblanc.com/randheli/medias/images/intro/1400/maskintro-en.png – Hushme

的CSS 3D转换的另一种读是使用视差滚动（以下其中的一个例子）

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

基本上，Skrollr可以转变。缩放，旋转和旋转任何元素，全部在层中完成并且过渡很平滑。所以基本上我会说只是找到一个关于Skrollr使用的教程（或者只是实验），创建你的元素，在这个例子中，元素是透明文本的背景，然后是透明文本背景元素下的另一个背景图像。

来源

2013-07-29 08:35:39 Mikey

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

来源

2013-07-29 08:28:02

另外，请仔细阅读如何使用CSS3 transition-timing-function @ http://www.the-art-of-web.com/css/timing-function/ –

Alrighty然后。谢谢，这非常有帮助！ – okiedokey

你正在看它的透明文本没有文字的实地图像

这里是它

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

和滚动的链接有一个叫snapscroll

来源

2013-07-29 08:43:04 Hushme

感谢关于插件的线索。 – okiedokey

背景图像上的透明文字

回答

相关问题