imovies
当前位置:首 页>> 百 宝 箱 >>CSS之z-index:Flash动画的层叠

CSS之z-index:Flash动画的层叠

  原本博客顶部的通栏展示是一张图片,后来做了一个简单的Flash动画放上。放上之后发现一个小问题,就是博文中的缩略图点击之后,会全屏显示原始大图片,不过,全屏时,Flash动画居然显示在最上层,也就是覆盖在原始大图片之上了。本想是给Flash动画加个z-index的负值之后就应该不覆盖原始大图了,结果依旧,没搞定。

  先介绍一下z-index,CSS的这个属性值,是用来设置元素堆叠顺序的,也就是垂直于屏幕方向上的排列顺序,类似于PS里层的概念,值越大的元素,会覆盖其下面的元素。z-index可以拥有负值,且仅能在定位元素上有效,比如position:absolute,position:relative,or position:fixed。默认值是auto,主流的浏览器都支持这个属性。也有列外,IE7及老版本不支持inherit,IE8需要!DOCTYPE,IE9还算厚道,能支持inherit了。

  根据这个z-index的说法来看,Flash动画应该是不覆盖其他元素了,可是不行哦,于是Google之,得知仅有z-index还不够哦,还得给Flash动画加上两个参数,代码如下:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1088" height="100" style="z-index:-99">
  <param name="movie" value="/images/top_show.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <embed src="/images/top_show.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="1088" height="100"></embed>
</object>
  其中第四行及第五行中的wmode="transparent"就是需要添加的参数,这样就搞定了,Flash动画老老实实的显示在原始大图下面了。
微信支付宝

标 签:FlashCSSz-index动画

评 论2 引 用0 浏 览3892

上一篇Google Earth celebrates one billion downloads

下一篇奥迪 Audi A1

信息列表:

楼主

runway
2011-10-18 13:10
微博分享怎么弄到那个位置的?
笑傲江湖
2011-10-18 19:47
@runway:需要自己在模板里放到哪个位置,用CSS定位。多谢关注。
说点什么:

正文内容:

 

图片博文

方正字迹

订阅Rss