7

我有一个位于 iframe 上方的元素（条），如果我在该元素上设置不透明度，它会停留在 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 顶部，同时保持其不透明度设置？

在这里摆弄

更新：

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

更新的小提琴

提前致谢

4

3 回答 3

2

如果使用 background: rgba(255,255,255,0.5) 其他元素将不受半透明背景的影响。

在我提供的示例中，当您使用 rgba 时，rgb 颜色（255,255,255）为白色，最后一位数字用于设置不透明度，0.5 将是 50% 半透明。

#foo {
    background: rgba(255,255,255,0.5);
}
于 2013-12-11T23:05:25.820 回答
0

据我了解，您希望文字在图片上方且透明？我在我的旧网站 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/

于 2013-03-05T01:40:25.713 回答
0

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

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

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

链接在这里

于 2013-01-28T10:32:48.003 回答