一些朋友在玩窩窩世界的時候,發現官方網站上的進入入口程式是Silverlight,但是有趣的是一個透明背景的Silverlight程式,這個效果最早我也未找資料,在未來Silverlight程式會在各個方面應用,透明背景的效果就會涉及,這種效果預覽如下:
<a target="_blank" href="http://blog.51cto.com/attachment/201111/220454469.jpg"></a>
下面一步一步的告訴大家這個小技巧,
首先要準備一個Silverlight,然後将MainPage的填充色設定為透明的,還有LayoutRoot也是一樣,我在這裡用了一張來自網絡的圖檔,
<a target="_blank" href="http://blog.51cto.com/attachment/201111/220503256.jpg"></a>
為了穩定,最好将MainPage的寬高定死,這樣有助于我們在網頁中呈現
<a target="_blank" href="http://blog.51cto.com/attachment/201111/220512824.jpg"></a>
我這張圖是256x256的,大家可以依據自己的需要設定大小,但是一定要符合最終呈現的需求。
現在我們在這個上面,小做幾個故事闆動畫,比如滑鼠移入移出,這樣能夠更好的看這個效果,具體實作我們就不做太多的說明,大家可以直接在最後下載下傳源工程浏覽。
現在我們要整合到網頁中,同樣,簡單準備了一個帶背景的網頁
<a target="_blank" href="http://blog.51cto.com/attachment/201111/220522322.jpg"></a>
現在我們需要添加Silverlight程式到網頁中:
<div>
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="300" height="220">
<param name="source" value="/ClientBin/youSilverlight.xap"/>
<param name="windowless" value="true"/>
<param name="background" value="#0F00" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
但是如果你直接運作的話,将會得到一個不是透明背景的效果,這是因為現在的Silverlight程式暫時還不是無視窗的模式,你需要将Windowless設定為true,就如上面的代碼所述。
剩下的工作你需要一個頁面設計師來幫你完成,比如将程式顯示在什麼地方之類的工作,
那麼下面我們預覽一下效果吧。這是和網頁結合的技巧,可以制作例如登入、Banner等需要透明背景的特效程式。
本文轉自nowpaper 51CTO部落格,原文連結:http://blog.51cto.com/nowpaper/712789