我想在一个html页面上嵌入一个swf,就像一个浮动的视频观看面板。我已经有一个swf文件,它将根据浏览器大小自动调整其大小,并且swf文件是部分透明的。我想我可以添加一个div标签,使位置绝对并更改z-index更大,但这不起作用因为swf刚刚替换了页面上的所有内容。

这就是我做的事情

<script>
      swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
      <div id="header"></div>
      <div id="shell">
          things in my html
      </div>
</body>

#header {
    position:absolute;
    z-index:100;

}

有什么想法吗?感谢。

有帮助吗?

解决方案

一旦你的尺寸正常工作,你需要将 wmode 设置为透明,以便能够看到闪光灯背后的内容,如果你不这样做的话背景将是不透明的。

这是来自 swfobject docs 的快速复制品,但它应该得到要点:

<script type="text/javascript">

var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

其他提示

我认为这个问题是CSS与<object />标签不兼容。 swfobject.embedSWF<div id="header"></div>转换为<=>标签,其中包含可能影响CSS的一堆属性。如果你在标题DIV周围创建一个包装器DIV并将CSS应用到包装器DIV,那么一切都会更好。您还需要在CSS中添加100%的宽度和高度。以下是修改后的来源:

<script>
    swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
    <div id="wrapper">
        <div id="header"></div>
        </div>
    <div id="shell">
        things in my html
    </div>
</body>

#wrapper {
    position:absolute;
    z-index:100;
    width:100%;
    height:100%;
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top