不透明度的元素在firefox中落后于iframe

Question

我有一个位于iframe上的元素(bar),如果我在该元素上设置不透明度,它会保留在iframe下,即使该项具有比iframe更大的z-index.

但是,如果我在该元素和iframe周围创建一个容器(foo),并在那里设置不透明度,则(bar)元素会像预期一样停留在iframe前面.

CSS:

#bar {
    width:100px; 
    opacity:0.5;
    height: 150px; 
    position:relative; 
    top:100px; 
    z-index:2; 
    background:red
}

#foo {
  /* opacity:0.5; */ 
}

HTML

<div id="foo">
    <div id="bar">
        <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>

    <iframe src="http://www.adelaide.edu.au/myuni/tutorials/docdesign/guides/docDesignGuide_KeepPDFsmall.pdf" width="200px" height="200px" frameborder="0" style="z-index:-1"></iframe>
</div>

创建该容器将解决我的问题,但我不能这样做,因为我当前的标记不允许它.我需要不透明度留在条形元素.

这只发生在Firefox中,iframe的内容是.pdf文件.

如何在保持其不透明度设置的同时让条形元素保持在iframe的顶部？

在这里小提琴

更新:

似乎问题与我在iframe中采购pdf文件而不是网页这一事实有关.

更新小提琴

提前致谢

Answer 1

看看那些链接。我认为这是对你的问题的讨论：

StackOverflow和Adob​​e 针对此问题的声明

我找到了另一个主题来讨论这个问题。根据您的情况，他们使用 pdf iframe：

链接在这里