相关疑难解决方法(0)

在youtube iframe上叠加opaque div

如何在youtube iframe嵌入视频上叠加半透明不透明度的div?

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

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

html css youtube iframe overlay

110
推荐指数
3
解决办法
13万
查看次数

什么有更高的优先级:浏览器中的不透明度或z-index?

我在JavaScript中编写了一个"弹出窗口",我遇到了一个有趣的事情:

裁剪截图显示奇怪的堆叠行为

弹出窗口下方的海军广场是可见的,即使我希望隐藏它.弹出广告后添加了弹出窗口,所以应该在顶部.

opacity海军广场的CSS 属性是0.3.从我的尝试来看,似乎间隔中的每个数字(0,1)都会产生相同的结果.如果我将其更改为1,则其行为与预期一致(即弹出窗口下方的部分被隐藏).

我试图将z-index属性设置10为方块和100弹出窗口,但它不会改变任何东西.

我错过了什么?为什么显示方块的一部分?

经测试的浏览器:

  • Firefox 3.6.x.
  • Chrome 4

css z-index opacity

45
推荐指数
4
解决办法
3万
查看次数

标签 统计

css ×2

html ×1

iframe ×1

opacity ×1

overlay ×1

youtube ×1

z-index ×1