圖片濾鏡代碼大全

來源:互聯網
上載者:User

 

效果如下:代碼:
<left><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="filter=alpha(opacity=100,style=1,finishopacity=0)"></left>
效果如下:代碼:
<left><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="filter=alpha(opacity=100,style=2,finishopacity=0)"></left>
效果如下:代碼:
<left><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3"style="FILTER: Chroma(Color=#13629f)"></left>
效果如下:代碼:
<left><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="filter=alpha(opacity=100,style=3,finishopacity=0)"></left>
效果如下:代碼:
<left><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="filter:'gray'"></left>
效果如下:代碼:
<left><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="filter:progid:DXImageTransform.Microsoft.Emboss()"></left>
效果如下:代碼:
<left><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="filter:flipv"></left>
效果如下:代碼:
<left><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="filter:fliph"></left>
效果如下:代碼:
<left><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></left>  去色並反相:
<IMG src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="FILTER: xray(color=#ffedff)"> 彩色反相:
<IMG src="http://s4.album.sina.com.cn/pic/48af9767020009v3" style="FILTER: invert(color=#ffedff)"> 重疊效果:

代碼:
<div style="width:358;filter:blur(add=true,direction=135,strength=15);"><img src="http://s4.album.sina.com.cn/pic/48af9767020009v3" width="165" height="350"></div>   原圖: 

 

 

1.原圖 : <img src="圖片.jpg">

2.柔邊效果-均勻 : <img src="圖片.jpg" style="filter:alpha(opacity=25, finishOpacity=25,style=0)">

3.柔邊效果-線狀(左往右) : <img src="圖片.jpg" style="filter:alpha(opacity=0, finishOpacity=100,style=1)">

4.柔邊效果-圓形(外往中央): <img src="圖片.jpg" style="filter:alpha(opacity=100, finishOpacity=0,style=2)">

5.柔邊效果-圓形(中央往外): <img src="圖片.jpg" style="filter:alpha(opacity=100, finishOpacity=0,style=3)">

6.詼諧效果 : <img src="圖片.jpg" style="filter: gray">

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

8.色彩對換 : <img src="圖片.jpg" style="filter:invert">

9.左右翻轉 : <img src="圖片.jpg" style="filter:FlipH()">

10.上下翻轉 : <img src="圖片.jpg" style="filter:FlipV()">

11.發光效果 : <div style="width: 134px; height: 140px;filter:glow(color=#ffffff, strength=6)"><img src="圖片.jpg" ></div> 12.附陰影效果 : <div style="width: 134px; height: 140px;filter:shadow(color:#333333,direction=150);"><img src="圖片.jpg" ></div>

13.投射陰影效果 : <DIV style="FILTER: Dropshadow(color:#333333,direction=150,offX=5,offY=5); WIDTH: 134px; HEIGHT: 140px"><img src="圖片.jpg" ></div>

14.波形效果 : <DIV style="FILTER: Wave(strength=5,lightstrengh=5); WIDTH: 134px; HEIGHT: 140px"><img src="圖片.jpg" ></div>

15模糊效果 : <DIV style="FILTER:Blur(direction=150); WIDTH: 134px; HEIGHT: 140px"><img src="圖片.jpg" ></div>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.