153.【教程】圖片濾鏡效果代碼

字型大小：大 中 小【教程】圖片濾鏡效果代碼來源:網路 收藏整理：博客特效大全hexun.com/yayb引用 慮鏡參數代碼和效果展示。慮鏡應用代碼：IMG代碼格式 <IMG Style="Filter:參數值 ;"> （註：IMG是圖片插入標籤）DIV代碼格式<DIV Style="Filter:參數值 ;width:慮鏡寬度;height:慮鏡高度" ><img src="圖片地址"></DIV> （註：DIV是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="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg" 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="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg"></div>效果:(style依次為1、2、3)

B.詼諧、Ｘ光效果、色彩對換：HTML代碼:詼諧:<img src="圖片地址" style="filter:Gray">或<div style="filter:Gray ;width:圖片寬度;height:圖片高度"><img src="圖片地址"></div>Ｘ光效果:<img src="圖片地址" style="filter:Xray">或<divstyle="filter:Xray ;width:寬;height:高"><img src="圖片地址"></div>色彩對換:<img src="圖片地址" style="filter:Invert">或<divstyle="filter:Invert ;width:寬;height:高"><img src="圖片地址"></div>範例: HTML代碼:詼諧:<img src="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg" style="filter:Gray">或<div style="width:360px;height:270px;filter:Gray"><img src="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg"></div>Ｘ光效果:<img src="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg" style="filter:Xray">或<div style="width:360px;height:270px;filter:Xray"><img src="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg""></div>色彩對換:<img src="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg" style="filter:Invert">或<div style="width:360px;height:270px;filter:Invert"><img src="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg""></div>效果:詼諧:『小強

Ｘ光效果:『小

色彩對換:『

C.翻轉：範例(效果為左右翻轉): HTML代碼:<img src="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg" style="filter:FlipH">或<div style="width:360px;height:270px;filter:FlipH"><img src="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg"></div>效果:

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="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg"></DIV>效果:『

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="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg"></DIV>效果:

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="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg"></DIV>效果:

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="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg"></DIV>效果:

H.波形效果： HTML代碼:<div style="filter:Wave(參數);width:寬;height:高" align=center><br><img src="圖片地址"></div>參數freq -->頻率(正)strength -->振幅強度(正)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="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg"></DIV>效果:

多重效果： HTML:(波形加上半透明合成)代碼：<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><img src="https://www.getit01.com/getimg_360.php?url=http://image41.360doc.com/DownloadImg/2011/11/0821/19122214_4.jpg" style="filter:Alpha(opacity=100,finishOpacity=0,style=2)"></DIV>效果:

推薦閱讀：