Question

我有一个位于iframe上的元素（bar），如果我在该元素上设置不透明度，它会保留在iframe下，即使该项目的z-index比iframe更大。

但是，如果我在该元素和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文件。

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

fiddle here

更新

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

updated fiddle

提前致谢

Answer 1

如果使用背景：rgba（255,255,255,0.5）其他元素不会受到半透明背景的影响。

在我提供的示例中，rgb颜色（255,255,255）在使用rgba时为白色，最后一位用于设置不透明度，.5将为50％半透明。

#foo {
    background: rgba(255,255,255,0.5);
}

Answer 2

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

StackOverflow和Adobe statement for this problem

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

Link here

Answer 3

据我所知，你希望文字在图片上方，并且透明吗？我在我的旧网站chadwaddell.info的封面页上做了类似的事情。我创建了一个容器div，然后将图片放在它自己的div中，并将文本放在它自己的div中。将容器位置设置为相对位置，将图片位置设置为绝对位置。另外，我会用rgba来做这样的不透明度

#bar {
width:100px; 
opacity:0.5;
height: 150px; 
position:relative; 
top:100px;  
color: rgba(3,3,3,0.5)
background:rgba(255,0,0,0.5)
}

我去了你的小提琴，做了我想说的话，希望这会有所帮助http://jsfiddle.net/N9cZp/23/

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

3 个答案: