在YouTube iFrame顶部粘贴Div网站时部分透明文本

Question

我有一个固定在页面顶部的导航元素，当它位于嵌入的YouTube iframe顶部时，它会使粘性导航元素中的文本更加透明（可能约为30％）。这只发生在Chrome中（我的版本是23.0.1271.97）。

您可以看到问题未显示在JSFiddle中，但它会显示在本地HTML文件或网络上的文件中。

以下是代码：

<style>
a{
    color: white;
}
#primaryNav
{
    background-color: #333;
    position: fixed;
        top: 0px;
        left: 0px;
}​
</style>

<div style="height: 400px;"></div>

<div id="primaryNav">
    <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Open House</a></li>
        <li><a href="#">Shadow Days</a></li>
        <li><a href="#">Curriculum</a></li>
    </ul>
</div>

<iframe width="350" height="197" src="http://www.youtube.com/embed/XfX2lvFbWlc?rel=0" frameborder="0" allowfullscreen></iframe>

<div style="height: 600px;"></div>​

YouTube和Vimeo都会发生这种情况，但我的公司网站或个人网站等其他网站都不会发生这种情况，所以我会假设悬停的div在某种程度上与嵌入式网页的内容进行交互，这对我来说很困惑

Answer 1

您可能想尝试查看它是否与wmode属性有关。尝试设置

?wmode=transparent

表示iframe。

如果这不起作用，可能与两个元素的z索引有关。