華中天地論壇 » 電 腦 知 識 » 图片透明效果
 
打印 | 推薦 | 訂閱 | 收藏
標題: 图片透明效果
 rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955
發表於 2013-7-1 12:45 
14.199.142.235
#1
分享  私人訊息  頂部
   

图片透明效果

   
    图片透明效果，有一种朦朦胧胧的美。代码如下：

<IMG style="FILTER: Alpha(opacity=100,finishOpacity=0,style=0); WIDTH: 图片宽度px; HEIGHT: 图片高度px" src="图片地址" width=图片宽度>

 

代码说明：

opacity: 开始处的透明度，可选值从 0-100
finishOpacity: 结束处的透明度
style: 0-平均透明 1-片状透明 2-圆形透明 3-方形透明

其中的数字（蓝色部分）可以根据个人喜好进行改动，透明度的数字越大，透明度越小，反之，透明度越大。

 

   下面是各种透明效果，请注意图下代码中数字的改变，自己还可以改动，直到您喜欢的效果为止。 

   原图 





    这幅是平均透明

<IMG style="FILTER: Alpha(opacity=50,finishOpacity=0,style=0); WIDTH: 图片宽度px; HEIGHT: 图片高度px" src="图片地址" width=图片宽度>





     这幅是片状透明，从左到右加大透明度。

<IMG style="FILTER: Alpha(opacity=100,finishOpacity=0,style=1); WIDTH: 图片宽度px; HEIGHT: 图片高度px" src="图片地址" width=图片宽度>





    这幅是方形透明

<IMG style="FILTER: Alpha(opacity=100,finishOpacity=0,style=3); WIDTH: 图片宽度px; HEIGHT: 图片高度px" src="图片地址" width=图片宽度>





    这幅是圆形透明

<IMG style="FILTER: Alpha(opacity=100,finishOpacity=0,style=2); WIDTH: 图片宽度px; HEIGHT: 图片高度px" src="图片地址" width=图片宽度>





 

     这幅把中心开始处的透明度数字改成了50，增加了中心开始处的模糊度。

<IMG style="FILTER: Alpha(opacity=50,finishOpacity=0,style=2); WIDTH: 图片宽度px; HEIGHT: 图片高度px" src="图片地址" width=图片宽度>

 


[ 本帖最後由 rainbow 於 2013-7-1 12:48 編輯 ]


 Aching
註冊會員

帖子 288
註冊 2013-7-2
用戶註冊天數 3954
發表於 2013-8-13 20:55 
183.178.45.242
#2

 

 

 

我已經成功將畫面作圓形模糊處理，還想學習:

怎樣在朦朧的畫面上加字或貼上文章?

請教rainbow,謝謝!

 

 

[ 本帖最後由 Aching 於 2013-8-14 21:32 編輯 ]


 rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955
發表於 2013-8-13 22:45 
14.136.96.30
#3


QUOTE:
原帖由 Aching 於 2013/8/13 20:55 發表：
怎樣在朦朧的畫面上加字或貼上文章?...


  上面所述是插图代码 img 的雾化效果，图片上不能加字，除非是用PS 先在图片上加字，用代码的话，文字只能加在图片外。

  在 HTML 代码里，若要在图片上加字，必须使用 table，并定义图片作为背景，就可以在以这张图片为背景的 table 上加字。而要使成为背景的图片雾化，就必须把 style="FILTER: Alpha(opacity=100,finishOpacity=0,style=2); WIDTH: 500px; HEIGHT: 375px" 加到 table 上，但这样雾化了的背景上的文字也同时变朦。如下图：

這裏加文字



代码：

<center> <center> <table style="FILTER: Alpha(opacity=100,finishOpacity=0,style=2); WIDTH: 500px; HEIGHT: 375px" background=http://i47.tinypic.com/25gyyjd.jpg width=500 height=375> <tr> <td valign=top><br> <p align=center><font size=7 color=#ff3333><b>這裏加文字</b></font></p> </td></tr></table> </center>

  另一种方法是用div定义图片和文字的相对位置，这种方法只是图片雾化，文字不会变朦胧。但这种方法比较麻烦，必须反复调试文字的位置，而得出的效果，在不同的电脑设备有可能不一样，在你的电脑里看到文字正中时，也许他人电脑里看到的字偏左、偏右、偏上、偏下，甚至跑到图片外。如下图：

這裏加文字



代码：

<center> <div style="WIDTH: 500px; HEIGHT: 375px"> <div style="left:0px; position:relative; top:0px"> <img style="FILTER: Alpha(opacity=100,finishOpacity=0,style=2); WIDTH: 500px; HEIGHT: 375px" src="http://i47.tinypic.com/25gyyjd.jpg"> </div> <div style="left:10px; position:relative; top:-350px"> <p align=center><font size=7 color=#ff3333><b>這裏加文字</b></font></p> </div> </div></center>

[ 本帖最後由 rainbow 於 2013-8-13 23:11 編輯 ]


 Aching
註冊會員

帖子 288
註冊 2013-7-2
用戶註冊天數 3954
發表於 2013-8-13 23:17 
183.178.45.242
#4

謝謝rainbow詳細解釋，

我像幼稚園學生般要慢慢咀嚼消化，

希望會在將來的貼子上運用。

上圖覆製yukeng的貼圖，漂亮，羨慕。



 rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955
發表於 2013-8-14 09:06 
14.136.97.174
#5


QUOTE:
原帖由 Aching 於 2013/8/13 23:17 發表：
……上圖覆製yukeng的貼圖，漂亮，羨慕。


  yukeng 的图是用图片处理工具预先进行雾化加字然后上传贴上的，并非用代码使之变模糊的。

  会使用PS等作图片特效处理的话，这种方法更方便。

  但预先PS雾化了的图片并不会与任何颜色的背景融为一体，这张图一定要求贴在白底的背景上，如果把这张图贴在有色背景里（像三华和新华的页面背景），这张图贴出的效果就变成这样了：



  预先用白色雾化的图片与分红色背景显得格格不入，若想使图片与有色背景融为一体，必须再做另一张用不同颜色预先PS雾化的图片了。或者可以再用代码进行再雾化；但经过两次雾化後图片变得太朦，如下图：



  这就是代码雾化与PS雾化的区别，各有各的优缺点。代码雾化可以配到任何颜色的背景但代码较复杂； 而PS雾化只能适合相同颜色背景但语法简单得多了。

  一般代码雾化图片特效多用于，需要在有色背景里，插上本身是白色底的图片时使用，使得看起来图片的背景与边框背景融合。用于解决那些不是透明背景的图片插入有色背景时的两种背景颜色自然过渡的问题。


[ 本帖最後由 rainbow 於 2013-8-15 19:52 編輯 ]


 




  Powered by Discuz! © Comsenz Inc. 檢舉論壇