点击(此处)折叠或打开
- <html>
- <head>
- <title>怎样使图片半透明丨石家庄苗木-河北品牌策划公司</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/changshi.ico\" 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;
- font-family:宋体;mso-ascii-font-family:\"Times New Roman\";\"Times New Roman\";mso-bidi-font-family:\"Times New Roman\";
- \"> </span>
- <span style=\"
- font-family:宋体;mso-ascii-font-family:\"Times New Roman\";\"Times New Roman\";mso-bidi-font-family:\"Times New Roman\";
- \">
- 经常在网上见到半透明的图片吧!图片不会遮挡住后面的文字,想知道怎么做的吗,很简单,</span><span style=\"font-family:宋体;\"Times New Roman\";mso-bidi-font-family:\"Times New Roman\";
- \">这就是<span lang=\"EN-US\">CSS样式表单滤镜Alpha的<span style=\"color:black\">强大功能,</span>仅用短短的几行代码,就实现了以上效果,</span></span>你应该看到了一个半透明的图片吧! <br>
- 用的图片是这张:<img align=\"top\" height=\"32\" src=\"/images/m04.jpg\" 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=\"/images/M04.JPG\"
- width=\"206\"><br>
- <br>
- 第二种的效果.<font color=\"#006666\">Alpha(Style=2)</font> <br>
- <img alt=\"返回首页!\" border=\"0\" class=\"style2\" height=\"65\" src=\"/images/M01.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>
- <br><br><hr>
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29737856/viewspace-1330835/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/29737856/viewspace-1330835/