} if( uid.equals(_udnmember) != true && !_IS_ADMIN && psn_main.getLock_right().equals("Y") ) { %>照片加霧化效果的語法 【部落格創作圖解教學9】 - 程如晞@部落格好好玩 - udn部落格
網路城邦
上一篇 回創作列表 下一篇   字體:
照片加霧化效果的語法 【部落格創作圖解教學9】
2010/12/13 12:13:29瀏覽7655|回應40|推薦154

人的一生可以為自己喜愛的事堅持,是一種幸福。
如晞2010年6月@荷蘭阿姆斯特丹桑斯安斯風車村
照片上的蝴蝶飛特效是另外加掛了透明的flash教學網誌在此

撰文.攝影╱程如晞

  常有格友私下向如晞提問經營部落格的相關問題,趁華梵盃即將開打之際,有許多網路城邦新手上路,如晞打算好好來把部落格輕鬆上手圖解系列教學網誌補齊。

  今天來分享照片加霧化效果的作法,若有遇到任何困難,歡迎提出來與如晞切磋。如果還有什麼想學的技巧,在如晞所寫的這一系列部落格輕鬆上手網誌中還找不到的話,也歡迎提出需求。如晞希望能幫大家減少摸索的時間並增加創作的成就感。

【把照片加上霧化效果的語法】

記得相片網址要換成你想秀的那張照片的網址

1.找出你要加霧化效果的照片,取得相片網址如:http://album.udn.com/community/img/PSN_PHOTO/101match/f_4969247_1.jpg後,直接貼到上面文字框框裏的backgroud="相片網址貼在這裡"

2.語法中 style="FILTER: Alpha(Opacity=100,style=2) 即是霧化的效果。Opacity是不透明的程度,數字愈少愈霧,我個人覺得100剛剛好,有點霧又不太霧。如果想要更矇矓,可以改成90或80或70。style是霧框的形狀,="2"是橢圓框,遮住的範圍比較多;style="3"是方的框,中間有一個不明顯的x黑影,試著改看看就知道。用如晞在荷蘭風車村的小照片來作示範,霧化的效果應該更清楚了。

style=2(橢圖霧化框) style=3(方框)

3.Copy上面文字框內的語法,貼到你的文章創作草稿內,記得要在純文字版的編輯模式,再切換回html,按這個文章創作時右上角的這個功能符號,就能切html或純文字。需要更多圖解說明,請參閱:打通部落格的任督二脈》如何美化首頁看板【Blog圖解教學7】

4.本網誌第一張照片是霧化再加上Flash的效果,語法如下,教學網誌在此

加掛透明Flash語法如下:

(相片的寛度及高度請依自己的照片尺寸修改)

5.以上教學是用很簡單的語法美化照片的效果,比方掩蓋歲月在臉上的痕跡,如果照片主角本身就很美的話,那可能就是多此一舉了。

【部落格新手教學網誌】

udn一次上傳一堆照片的秘訣 1

如何使用部落格的引用功能 2

將圖片放在網誌的文右或左的方法 3

插入影音播放器及自動播放音樂的方法 4

UDN自訂網誌模版教學 5

照片加掛透明Flash教學 6

如何美化首頁看板教學 7

如何在網誌中插入多張照片 8

【教學】山頭動起來! by 愛徒EG陳怡君

【教學】游標穿新衣 by 愛徒EG陳怡君

玩模板》如何更改更改山頭圖檔? by 電小二


如有任何部落格行銷構想或演講,歡迎email到
rucccc@gmail.com

( 休閒生活網路生活 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=101match&aid=4684033
 引用者清單(3)  
2011/04/26 14:56 【BANK】 Flash+霧化效果
2010/12/14 07:26 【程如晞@部落格好好玩】 給華梵五班的空中祝福~【附廣播】 
2010/12/14 07:24 【程如晞@部落格好好玩】 這美好的一仗

 回應文章 頁/共 4 頁  回應文章第一頁 回應文章上一頁 回應文章下一頁 回應文章最後一頁

庭楓
等級:8
留言加入好友
RE
2010/12/19 01:38
如晞老師的教學總是讓部落客的新鮮人收穫滿滿呢˙ˇ˙
楓香道上人離去,過往回憶難捨取;

抬首向前不放棄,友在我心長相聚。

*~*~*~*~*~*~*~*

或許我很渺小,但希望我的文字能使人感動^^

星際訪客
等級:8
留言加入好友
回應
2010/12/18 07:43

很不錯的分享...不過您的做法只適合在 IE 上顯示......

若以跨瀏覽器為考量...通常會先以影像軟體處理霧化等效的後製存為 PNG 圖檔...再以下方的語法來顯示 :

<img style="width:寬;height:高;background:url(PNG圖檔URL;間接位址);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='PNG圖檔URL;絕對位址',sizingMethod='crop')" src="透明GIF圖檔"/>

另外加掛透明Flash語法需修正如下 :

<table cellspacing="0" cellpadding="0" style="FILTER: Alpha(Opacity=100,style=2)" height="393" width="520" background="你的相片網址貼這裡"><tbody><tr><td><p align="center"><embed src="你想要加掛的Flash網址" width="500" height="380" type="application/x-shockwave-flash" wmode="transparent" /></p></td></tr></tbody></table>

若手邊有製作 Flash 的軟體...可直接將相片與 Flash 合為單一 Flash 檔上傳至 UDN 來使用......



meow
等級:8
留言加入好友
是妳!
2010/12/17 01:20
不愧是部落格教母

我們的格子都因妳的無私教學而美麗


程如晞(101match) 於 2010-12-17 15:39 回覆:

親愛的喵喵,

謝謝你讓我不斷不斷憶起我們結伴環島的美好時光

這幾天因為眼疾小小復發 在電腦前無法久坐

因此昨天細細看了你的網誌 沒來得及留言 自家的網誌更不用說 

***

好快啊 一年一年就這樣過了....

我的2010年 其實可以說是多事之秋  

有空聚首再來好好聊

寄予無限祝福

PS: 你有泡菜照片嗎 快遞一張給我 


Arthur Wong
等級:6
留言加入好友
剛剛在老查那兒
2010/12/15 11:49

意外看到回覆中的音樂檔

聽了一下

原來是妳和老查在漢聲的錄音

很精采呢

一口氣不分次全聽完了呢^^}


法林禪
等級:4
留言加入好友
小白亮亮
2010/12/14 15:03



等級:
留言加入好友
隨緣自在
2010/12/14 14:55



等級:
留言加入好友
可愛的貓咪
2010/12/14 14:44


Sophie*
等級:5
留言加入好友
霧化+flash
2010/12/14 14:35

太陽好大阿~!!



等級:
留言加入好友
好吃的
2010/12/14 14:21


等級:
留言加入好友
崩解
2010/12/14 14:20
頁/共 4 頁  回應文章第一頁 回應文章上一頁 回應文章下一頁 回應文章最後一頁