怎样使图片半透明


点击(此处)折叠或打开

  1. <html>
  2.     <head>
  3.     <title>怎样使图片半透明丨石家庄苗木-河北品牌策划公司</title>
  4.     <meta content=\"text/html; charset=gb2312\" http-equiv=\"Content-Type\">
  5.     <style type=\"TEXT/CSS\">.cool {
  6.     BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-WIDTH: 1px; CURSOR: hand; FONT-SIZE: 9pt
  7.     }
  8.     A {
  9.     TEXT-DECORATION: none
  10.     }
  11.     A:hover {
  12.     COLOR: #ff9900; TEXT-DECORATION: underline
  13.     }
  14.     TD {
  15.     FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
  16.     }
  17.     TH {
  18.     FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
  19.     }
  20.     BODY {
  21.     FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
  22.     }
  23.     .tm {
  24.     FILTER: Alpha(Opacity=50)
  25.     }
  26.     .style2 {
  27.     FILTER: Alpha(Style=2)
  28.     }
  29.     .style1 {
  30.     FILTER: Alpha( Style=1, StartX=30, StartY=20,FinishX=15,FinishY=5)
  31.     }
  32.     </style>
  33.     <meta content=\"Microsoft FrontPage 6.0\" name=\"GENERATOR\">
  34.     </head>
  35.     <body bgColor=\"#ffffff\" link=\"#6699FF\" vLink=\"#6699CC\">
  36.     <center>
  37.     <table cellPadding=\"0\" cellSpacing=\"0\" width=\"484\">
  38.     <TBODY>
  39.     <tr vAlign=\"top\">
  40.     <td width=\"490\"><table cellPadding=\"0\" cellSpacing=\"0\" width=\"100%\">
  41.     <TBODY>
  42.     <tr>
  43.     <td vAlign=\"top\" width=\"397\">
  44.     <div
  45.     id=\"Layer1\" style=\"HEIGHT: 31px; LEFT: 138px; POSITION: absolute; TOP: 166px; WIDTH: 14px\">
  46.     <dd>
  47.     <img class=\"tm\" src=\"/images/changshi.ico\" width=\"32\" height=\"32\"></dd>
  48.     </div>
  49.     <script>
  50.     //这是使图层移动的函数
  51.     function move_layer()
  52.     {
  53.     Layer1.style.left=event.clientX+document.body.scrollLeft+10;
  54.     Layer1.style.top=event.clientY+document.body.scrollTop+10;
  55.     }
  56.     //这里的意思是,如果鼠标移动时就调用\"move_layer\"函数
  57.     document.onmousemove =move_layer;
  58.     </script>
  59.     </td>
  60.     </tr>
  61.     </TBODY>
  62.     </table>
  63.     </td>
  64.     </tr>
  65.     <tr>
  66.     <td vAlign=\"top\" width=\"490\">
  67.     <table cellPadding=\"0\" cellSpacing=\"0\" width=\"392\">
  68.     <TBODY>
  69.     <tr>
  70.     <td height=\"1\" vAlign=\"top\" width=\"3\"></td>
  71.     <td vAlign=\"top\" width=\"11\"></td>
  72.     <td height=\"22\" vAlign=\"top\" width=\"487\">
  73.     <table cellPadding=\"0\" cellSpacing=\"0\" class=\"hs\"
  74.     width=\"487\" height=\"269\">
  75.     <TBODY>
  76.     <tr align=\"middle\">
  77.     <td height=\"33\" colspan=\"3\" width=\"485\" valign=\"bottom\">
  78.     <p align=\"center\"><font size=\"2\" color=\"#FF0000\">怎样使图片半透明</font></p>
  79.     </td>
  80.     </tr>
  81.     <tr vAlign=\"top\">
  82.     <td width=\"185\" height=\"236\"><span style=\"font-size:10.5pt;
  83.     font-family:宋体;mso-ascii-font-family:\"Times New Roman\";\"Times New Roman\";mso-bidi-font-family:\"Times New Roman\";
  84.     \"> </span>
  85.     <span style=\"
  86.     font-family:宋体;mso-ascii-font-family:\"Times New Roman\";\"Times New Roman\";mso-bidi-font-family:\"Times New Roman\";
  87.     \">
  88.     经常在网上见到半透明的图片吧!图片不会遮挡住后面的文字,想知道怎么做的吗,很简单,</span><span style=\"font-family:宋体;\"Times New Roman\";mso-bidi-font-family:\"Times New Roman\";
  89.     \">这就是<span lang=\"EN-US\">CSS样式表单滤镜Alpha的<span style=\"color:black\">强大功能,</span>仅用短短的几行代码,就实现了以上效果,</span></span>你应该看到了一个半透明的图片吧! <br>
  90.     用的图片是这张:<img align=\"top\" height=\"32\" src=\"/images/m04.jpg\" width=\"32\"><br>
  91.     为了更加清楚的看到效果。我们让图片跟随鼠标! 产生半透明效果的方法用了CSS样式!<br>
  92.     </td>
  93.     <td width=\"68\" height=\"236\">
  94.     </td>
  95.     <td width=\"228\" height=\"236\">第一种效果:<font color=\"#006666\">Alpha( Style=1, StartX=30, StartY=20, FinishX=15,
  96.     FinishY=5)</font><br>
  97.     <img alt=\"返回首页!\" border=\"0\" class=\"style1\" height=\"69\" src=\"/images/M04.JPG\"
  98.     width=\"206\"><br>
  99.     <br>
  100.     第二种的效果.<font color=\"#006666\">Alpha(Style=2)</font> <br>
  101.     <img alt=\"返回首页!\" border=\"0\" class=\"style2\" height=\"65\" src=\"/images/M01.JPG\"
  102.     width=\"206\"><br>
  103.     其他参数自己试试吧!<br>
  104.     <br>
  105.     </td>
  106.     </tr>
  107.     </TBODY>
  108.     </table>
  109.     </td>
  110.     </tr>
  111.     </TBODY>
  112.     </table>
  113.     </td>
  114.     </tr>
  115.     <tr align=\"right\">
  116.     <td width=\"490\"></td>
  117.     </tr>
  118.     </table>
  119.     <p align=\"center\"> </p>
  120.     </center>
  121.     </body>
  122.     </html>
  123.     <br><br><hr>

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29737856/viewspace-1330835/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/29737856/viewspace-1330835/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值