Html iFrame透明度_Html_Iframe - Fatal编程技术网

Html iFrame透明度

html iframe

Html iFrame透明度,html,iframe,Html,Iframe,如何能够在html页面的顶部放置一个有黑色背景且略微透明的iFrame，从而使页面变暗到目前为止，我有这个，但它不起作用 <iframe id="fade" src="fade.html" frameborder="No" style="FILTER: chroma(color=#000000)" allowtransparency="true"> <p>Your browser does not support iframes.</p> <

如何能够在html页面的顶部放置一个有黑色背景且略微透明的iFrame，从而使页面变暗

到目前为止，我有这个，但它不起作用

<iframe id="fade" src="fade.html" frameborder="No" style="FILTER: chroma(color=#000000)" allowtransparency="true">  
    <p>Your browser does not support iframes.</p>
</iframe>


您的浏览器不支持iFrame

fade.html

<html>
<body style="background:transparent">
</html>

如果您只想在某些元素上放置一个半透明框，请尝试使用右侧的

z-index

和属性定位一个

div

：

HTML

您是否正在这样做？是否在某些元素上创建遮罩？如果是这样，你可以考虑只使用半透明<代码> <代码>。我正在尝试这样做。我会调查一下的。我还在做，但我不确定div是否能用。我试着做一些事情，比如看facebook图片。考虑到它的浏览器支持，filter属性对我来说似乎有点太多了。。。为什么不使用透明的黑色背景色

背景色：rgba（0,0,0,0.5）

并使用百分比设置窗口的iframe填充宽度和高度。@EricSauer类似于灯箱（）？+1我从p和shade css中删除了z-index，并且仍然可以在FireFox上使用它所使用的内容for@shareefz索引决定了某些内容在“堆栈”中的分层位置。如果有多个div需要相互覆盖，可以使用

z-index

确保它们以正确的顺序相互覆盖。看起来我的例子有点不对劲——如果你给

标记一个

z-index

比

#shade

高的

和一个位置：绝对，它将位于它上面。尝试使用此示例中的z索引：
<p>I sit in the background and get covered up by a box.</p>
<div id="shade"></div>

#shade {
    background-color: red;
    opacity: 0.7;
    position: absolute;
    top: 0px;
    left: 5px;
    width: 50px;
    height: 50px;
    z-index: 5;
}
p {
  position: absolute;
  z-index: 1;  
}