设为首页
加入收藏
用户登陆
特效首页
素材首页
网页特效
特效推荐
设计欣赏
英文字体
中文字体
学习论坛
站 内 搜 索
热门关键字：
表格
超链接
漂浮
跟随
旋转
闪烁
日期
艺术字
滚动
点击
关联菜单
弹出
随机
网页特效分类
鼠标特效
页面特效
背景特效
导航菜单
状态栏类
文本特效
链接特效
图形特效
窗口特效
按钮特效
时间日期
系统相关
计数转换
游戏娱乐
黑客性质
代码生成
综合特效
CSS相关
网页特效分类
>>
图形特效
怎样使图片半透明
[ 发布者：luwei | 来源：本站整理 | 时间：2005-10-23 | 浏览： 人次 ]
<html> <head> <title>网页特效|JcwCn.Com/Js|---怎样使图片半透明</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style type="TEXT/CSS">.cool { BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-WIDTH: 1px; CURSOR: hand; FONT-SIZE: 9pt } A { TEXT-DECORATION: none } A:hover { COLOR: #ff9900; TEXT-DECORATION: underline } TD { FONT-SIZE: 9pt; LINE-HEIGHT: 13pt } TH { FONT-SIZE: 9pt; LINE-HEIGHT: 13pt } BODY { FONT-SIZE: 9pt; LINE-HEIGHT: 13pt } .tm { FILTER: Alpha(Opacity=50) } .style2 { FILTER: Alpha(Style=2) } .style1 { FILTER: Alpha( Style=1, StartX=30, StartY=20,FinishX=15,FinishY=5) } </style> <meta content="Microsoft FrontPage 6.0" name="GENERATOR"> </head> <body bgColor="#ffffff" link="#6699FF" vLink="#6699CC"> <center> <table cellPadding="0" cellSpacing="0" width="484"> <TBODY> <tr vAlign="top"> <td width="490"><table cellPadding="0" cellSpacing="0" width="100%"> <TBODY> <tr> <td vAlign="top" width="397"> <div id="Layer1" style="HEIGHT: 31px; LEFT: 138px; POSITION: absolute; TOP: 166px; WIDTH: 14px"> <dd> <img class="tm" src="images/girl.gif" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/girl.gif" width="32" height="32"></dd> </div> <script> //这是使图层移动的函数 function move_layer() { Layer1.style.left=event.clientX+document.body.scrollLeft+10; Layer1.style.top=event.clientY+document.body.scrollTop+10; } //这里的意思是，如果鼠标移动时就调用"move_layer"函数 document.onmousemove =move_layer; </script> </td> </tr> </TBODY> </table> </td> </tr> <tr> <td vAlign="top" width="490"> <table cellPadding="0" cellSpacing="0" width="392"> <TBODY> <tr> <td height="1" vAlign="top" width="3"></td> <td vAlign="top" width="11"></td> <td height="22" vAlign="top" width="487"> <table cellPadding="0" cellSpacing="0" class="hs" width="487" height="269"> <TBODY> <tr align="middle"> <td height="33" colspan="3" width="485" valign="bottom"> <p align="center"><font size="2" color="#FF0000">怎样使图片半透明</font></p> </td> </tr> <tr vAlign="top"> <td width="185" height="236"><span style="font-size:10.5pt;mso-bidi-font-size:10.0pt; font-family:宋体;mso-ascii-font-family:"Times New Roman";mso-hansi-font-family: "Times New Roman";mso-bidi-font-family:"Times New Roman";mso-font-kerning:1.0pt; mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA"> </span> <span style="mso-bidi-font-size:10.0pt; font-family:宋体;mso-ascii-font-family:"Times New Roman";mso-hansi-font-family: "Times New Roman";mso-bidi-font-family:"Times New Roman";mso-font-kerning:1.0pt; mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA"> 经常在网上见到半透明的图片吧！图片不会遮挡住后面的文字，想知道怎么做的吗，很简单，</span><span style="mso-bidi-font-size:10.0pt;font-family:宋体;mso-hansi-font-family: "Times New Roman";mso-bidi-font-family:"Times New Roman";mso-font-kerning:1.0pt; mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA">这就是<span lang="EN-US">CSS样式表单滤镜Alpha的<span style="color:black">强大功能，</span>仅用短短的几行代码，就实现了以上效果，</span></span>你应该看到了一个半透明的图片吧！ <br> 用的图片是这张：<img align="top" height="32" src="images/girl.gif" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/girl.gif" width="32"><br> 为了更加清楚的看到效果。我们让图片跟随鼠标! 产生半透明效果的方法用了CSS样式！<br> </td> <td width="68" height="236"> </td> <td width="228" height="236">第一种效果:<font color="#006666">Alpha( Style=1, StartX=30, StartY=20, FinishX=15, FinishY=5)</font><br> <img alt="返回首页!" border="0" class="style1" height="69" src="javascript:if(confirm('http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found. \n\nDo you want to open it from the server?'))window.location='http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG'" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG" width="206"><br> <br> 第二种的效果.<font color="#006666">Alpha(Style=2)</font> <br> <img alt="返回首页!" border="0" class="style2" height="65" src="javascript:if(confirm('http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found. \n\nDo you want to open it from the server?'))window.location='http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG'" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG" width="206"><br> 其他参数自己试试吧！<br> <br> </td> </tr> </TBODY> </table> </td> </tr> </TBODY> </table> </td> </tr> <tr align="right"> <td width="490"></td> </tr> </table> <p align="center"> </p> </center> </body> </html>
本 类 相 关 特 效
图片集旋转显示
图片的水韵效果
另一款图片的切换效果
虚幻显示的图片
图片播放器
图形选择脚本
双击可放大缩小的图片
判断远程图片是否存在，...
能用鼠标拖放的图片
CopyRight © 2006
JcwCn.Com
All Rights Reserved
网页特效代码 | SC v2.0 Designed By JcwCn 有任何问题请与
站长联系
