[ZT]图片滤镜

挺有用处的`

转自 记忆深处    http://qidi725.spaces.live.com/blog/cns!4477044573058C6F!3946.entry


 

引用

图片滤镜

各種濾鏡樣式的詳細描述情形:

濾鏡的樣式名稱為 filter,
所以
套用在圖片上為
<IMG Style="Filter:值 ;">
套用在DIV上為<DIV Style="Filter:值 ;width:濾鏡寬;height:濾鏡高" ><IMG></DIV>

為何使用DIV:因為上下邊界無空白,可以替代IMG,且某些濾鏡僅使用在DIV,多重效果要靠它。
但使用DIV時,必須設定寬度和高度。
*要設定多個參數時,必須以半形的逗號","來區隔
*圖寬與圖高只要在圖片上按右鍵內容可以得知

本範例使用原圖:(width:360px;height:270px;)

A.半透明合成:

HTML:

<img src="圖片" style="filter:Alpha(■)">

<div style="filter:Alpha(■) ;width:圖寬;height:圖高"><img src="圖片"></div>

■參數

opacity             –>設定起始處的透明度
finishOpacity     –>設定結束處的透明度
style                –>0:均勻、1:線狀、2:圓形、3:長方形

範例:

HTML(Style為長方形):
<img src="http://myurl.com.tw/kdjd&quot; style="filter:Alpha(opacity=100,finishOpacity=0,style=3)">

<div style="width:360px;height:270px;filter:Alpha(opacity=100,finishOpacity=0,style=3)">
<img src="http://myurl.com.tw/kdjd""></div&gt;

結果:(style依序為1、2、3)

 

B.詼諧、X光效果、色彩對換(互補色):

HTML:

詼諧:
<img src="圖片" style="filter:Gray">

<div style="filter:Gray ;width:圖寬;height:圖高"><img src="圖片"></div>

X光效果:
<img src="圖片" style="filter:Xray">

<div style="filter:Xray ;width:圖寬;height:圖高"><img src="圖片"></div>

色彩對換:
<img src="圖片" style="filter:Invert">

<div style="filter:Invert ;width:圖寬;height:圖高"><img src="圖片"></div>

■參數

範例:

HTML:
詼諧:
<img src="http://myurl.com.tw/kdjd&quot; style="filter:Gray">

<div style="width:360px;height:270px;filter:Gray">
<img src="http://myurl.com.tw/kdjd""></div&gt;

X光效果:
<img src="http://myurl.com.tw/kdjd&quot; style="filter:Xray">

<div style="width:360px;height:270px;filter:Xray">
<img src="http://myurl.com.tw/kdjd""></div&gt;

色彩對換:
<img src="http://myurl.com.tw/kdjd&quot; style="filter:Invert">

<div style="width:360px;height:270px;filter:Invert">
<img src="http://myurl.com.tw/kdjd""></div&gt;

結果:

詼諧:

X光效果:

色彩對換:

C.翻轉:

HTML:

左右翻轉:
<img src="圖片" style="filter:FlipH">

<div style="filter:FlipH ;width:圖寬;height:圖高"><img src="圖片"></div>

上下翻轉:
<img src="圖片" style="filter:FlipV">

<div style="filter:FlipV ;width:圖寬;height:圖高"><img src="圖片"></div>

■參數

範例(效果為左右翻轉):

HTML:
<img src="http://myurl.com.tw/kdjd&quot; style="filter:FlipH">

<div style="width:360px;height:270px;filter:FlipH">
<img src="http://myurl.com.tw/kdjd""></div&gt;

結果:

D.發光效果:

HTML:

<div style="filter:Glow(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>

■參數

color             –>發光顏色
strength        –>發光強度
濾鏡寬=圖寬+發光強度x2
濾鏡高=圖高+發光強度x2+10

範例:

HTML:
<DIV style="FILTER: Glow(color=#4A7AC9,strength=12); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV&gt;

結果:

E.投射陰影效果:

HTML:

<div style="filter:Shadow(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>

■參數

color             –>發光顏色
direction        –>方向(45角度單位)(0、45、90、135、180、225、270、315)
濾鏡寬=略大於圖寬(建議:圖寬+24)
濾鏡高=略大於圖高(建議:圖高+24+10)

範例:

HTML:
<DIV style="FILTER: Shadow(color=#4A7AC9,direction=135); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV&gt;

結果:

 

F.附陰影效果:

HTML:

<div style="filter:Dropshadow(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>

■參數

color             –>發光顏色
offX              –>水平位移(可正負)
offY              –>垂直位移(可正負)
濾鏡寬=圖寬+水平位移絕對值+10
濾鏡高=圖高+垂直位移絕對值+10+10

範例:

HTML:
<DIV style="FILTER:Dropshadow(color=#333333,offX=5,offY=5); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV&gt;

結果:

 

G.模糊效果:

HTML:

<div style="filter:Blur(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>

■參數

direction        –>方向(45角度單位)(0、45、90、135、180、225、270、315)
濾鏡寬=略大於圖寬(建議:圖寬+15)
濾鏡高=略大於圖高(建議:圖高+15+10)

範例:

HTML:
<DIV style="FILTER: Blur(direction=135); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV&gt;

結果:

 

H.波形效果:(ps.好複雜的參數設定@@")

HTML:

<div style="filter:Wave(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>

■參數

freq              –>頻率(0+)
strength        –>振幅強度(0+)
lightstrength  –>波峰強度(0~100)愈高越黑
phase           –>起始相位(0~100)
濾鏡寬=圖寬+振幅強度x2
濾鏡高=圖高+振幅強度x2+10

範例:

HTML:
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV&gt;

結果:

與原圖比較:

 

多重效果範例(請自行領悟:p):

HTML:(波形加上半透明合成)
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><img src="http://myurl.com.tw/kdjd&quot; style="filter:Alpha(opacity=100,finishOpacity=0,style=2)"></DIV>

結果:

<from gene>
Advertisements
  1. 留下评论

Log in or fill out contact info to leave a reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: