背景圖像上的透明文字

-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

背景圖像上的透明文字

回答

相關問題