canvas覆盖在div上面 不是在div下面 怎么解决

Posted 2023-05-04

参考技术A z-index:10堆叠顺序,数值调高点就最上面了，可以覆盖其他内容

在 youtube iframe 上覆盖不透明的 div

【中文标题】在 youtube iframe 上覆盖不透明的 div

【英文标题】：overlay opaque div over youtube iframe

【发布时间】：2011-04-18 17:34:25

【问题描述】：

如何在 youtube iframe 嵌入视频上覆盖具有半透明不透明度的 div？

<iframe class="youtube-player" type="text/html"   src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

CSS

#overlay 
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;

编辑（添加更多说明）： HTML5 正在接近我们，越来越多的设备使用它而不是 flash，这使 youtube 视频的嵌入变得复杂，幸好 youtube 提供了一个特殊的可嵌入 iFrame 来处理所有视频嵌入的兼容性问题，但现在覆盖了以前的工作方法具有半透明 div 的视频对象不再有效，我现在无法向对象添加 <param name="wmode" value="transparent">，因为它现在是 iFrame，那么如何在 iframe 嵌入视频的顶部添加不透明 div ?

【问题讨论】：

看来 youtube 完全解决了这个问题。

我仍然可以在 Chrome 中看到问题。

@scribu 可能是闪存安全问题，或者我遗漏了什么，我在本地服务器上测试过。

可能。无论如何，anataliocs 的解决方案对我有用。

你能在这个问题中添加 youtube 标签吗？

【参考方案1】：

Information from the Official Adobe site about this issue

问题是当您嵌入 youtube 链接时：

https://www.youtube.com/embed/kRvL6K8SEgY

在 iFrame 中，默认的 wmode 是窗口化的，这实际上赋予它的 z-index 大于其他所有内容，并且它将覆盖任何内容。

尝试将此 GET 参数附加到您的 URL：

wmode=不透明

像这样：

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

确保它是 URL 中的第一个参数。其他参数必须放在后面

在 iframe 标记中：

例子：

<iframe class="youtube-player" type="text/html"   src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

【讨论】：

Adobe 提供的有关该问题的信息：http://kb2.adobe.com/cps/155/tn_15523.html。仅作记录。

【参考方案2】：

请注意，wmode=transparent 修复仅在第一次如此时才有效

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

不是

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

【参考方案3】：

嗯……这次有什么不同？ http://jsfiddle.net/fdsaP/2/

在 Chrome 中呈现良好。你需要跨浏览器吗？这确实有助于具体化。

编辑：Youtube 渲染 object 和 embed 没有明确设置 wmode，这意味着它默认为“窗口”，这意味着它覆盖了所有内容。您需要：

a) 自己托管包含对象/嵌入代码的页面，如果您选择同时提供这两个元素，则将 wmode="transparent" 参数元素添加到要嵌入的对象和属性中

b) 找到一种方法让 youtube 指定这些内容。

【讨论】：

是的，我发现了问题所在，在 Firefox 和 chrome 中，它适用于普通背景，添加不透明度使其发光...你的也发光。

编辑了 iframe 示例，使其看起来像我的样子。 jsfiddle.net/fdsaP/6

所以...您希望将不透明度应用于 iframe 内的对象/嵌入元素？

是的，我没有注意到 iframe 被覆盖，因为对我来说，对象覆盖了整个 iframe，如果可能的话，我需要覆盖视频，否则我会用黑色 div 替换它相同的宽度/高度和位置。

@meder 感谢您的链接和解决方案！现在会尝试一下，但是 Flash 仍然可以点击 :)

【参考方案4】：

在找到 anataliocs 技巧之前，我花了一天时间弄乱 CSS。将wmode=transparent 作为参数添加到 YouTube URL：

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
     
     
    style="border:none;">
</iframe>

这允许 iframe 继承其容器的 z-index，因此您的不透明 <div> 将位于 iframe 前面。

【参考方案5】：

不透明的覆盖是为了美观吗？

如果是这样，您可以使用：

#overlay 
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;

'pointer-events: none' 将改变覆盖行为，使其在物理上不透明。当然，这只适用于好的浏览器。

【讨论】：

safari 4、chrome 和 firefox3.6 仍然可以点击？？

我正在尝试将 youtube 嵌入视频放在不透明背景后面，以达到完全美观的目的 :)