让文字浮在flash或者图片之上,并且文字半透明

来源:互联网 发布:淘宝签名照是真的吗 编辑:程序博客网 时间:2024/05/16 10:53

      生活不菜,菜鸟不菜。大家好,我是互联网小菜鸟。又和大家见面了,最近在想把自己的简历做得漂亮一点,于是乎就想做html版的简历,里面加入了JQuery,一些小动画,也是这两天刚看了点JQuery的东西,看看能不能加进去,感觉还不错!今天想和大家分享的是,如何在flash和图片上添加文字,并且文字是半透明的。摸索了一丢丢时间,终于搞定,下面就和大家说说具体步骤。

     我们以flash为例来说明一下。首先你在你的html文档里应该已经插入了

<div class="logoFlash">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="1002" height="135">
                        <param name="movie" value="flash/Random_011.swf">
                        <param name="quality" value="high">
                        <param name="wmode" value="transparent">
                        <embed src="flash/Random_011.swf" width="1002" height="135" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent">
      </embed>
  </object>   
</div>

这个flash代码。然后我们写一个文字的html标签,简单点就是<div><font id="name" size="+3">菜鸟应聘简历</font></div>,然后,就是CSS发挥作用的时候了。下面看一下CSS里面的代码。

.logoFlash{
    position:relative;
   height: 134px;
 width: 100%;
}
#name{
    position:absolute;
 width:300px;
 height:100px;
 left:535;
 top:50;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity:0.5;
 font:bold 30px/30px Verdana, Arial;
 text-align:center;
 cursor:hand;
 color:#de5643;
}
在CSS里面我们可以看见那个Flash用的是相对位置,而文字用的是绝对位置,把文字改成半透明的关键代码是

 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 opacity:0.5;

大家可以自己写一下试一下,然后,体验一下,有问题可以留言,大家一起学习。好了,希望大家看得开心,玩的愉快~

原创粉丝点击