Html 如何将一个 Div 放在另一个具有透明背景的 Div 上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7374234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put a Div on another Div with transparent background?
提问by Mahesh Thumar
I want to put a div(1) with transparent background on the top of another Div(2). Because I want to make all the element that div(2) contains disable. so, If i will put div(1) on top of div(2) then elements that are inside the div(2) will not be clicker anymore.
我想在另一个 Div(2) 的顶部放置一个具有透明背景的 div(1)。因为我想让 div(2) 包含的所有元素都禁用。所以，如果我将 div(1) 放在 div(2) 之上，那么 div(2) 内的元素将不再是点击器。
采纳答案by Andres Ilich
You can add a transparent overlay over your content, like so:
您可以在内容上添加透明叠加层，如下所示：
回答by Pranay Rana
make use of Z-indexproperty thats it.
利用Z-index财产就是这样。
//inner div
.div1
{
z-index : 1;
}
//outer div
.div2
{
z-index : 10;
}
div2 over lay div1.
div2 覆盖 div1。
Also check existing question answer : How to overlay one div over another div
还要检查现有的问题答案：如何将一个 div 覆盖在另一个 div 上
回答by Mo.
Use z-indexfor both div DIV
使用z-index两个DIV DIV
use
用
opacity:0.5
不透明度：0.5
for the DIV 1. unfortunately all IE couldn't support opacity
对于 DIV 1. 不幸的是，所有 IE 都不能支持不透明度
回答by ClarkeyBoy
Pranay is correct. I personally use this technique for overlays; for example:
普拉奈是正确的。我个人将这种技术用于叠加；例如：
#overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #333333;
//Cross-browser opacity below
-moz-opacity:.80;
filter:alpha(opacity=80);
opacity:.80;
z-index: 10000000;
}
回答by Ondrej Vrabel
I need it like you, but I use this code:
我和你一样需要它，但我使用这个代码：
<div class="content"><object type="application/x-shockwave-flash" height="100" width="222" data="http://www.usflashmap.com/component/cdt_new/cdt2_1.swf">
<param name="movie" value="http://www.usflashmap.com/component/cdt_new/cdt2_1.swf" />
<param name="base" value="http://www.usflashmap.com/component/cdt_new/" />
<param name="flashvars" value="
&timer=1&
&time_template=2:ss;1:mm;0:hh&
&time_color=0x000000&
&label_color=0x000000&
&background_color=0xFFFFFF&
&flare_view=true&
&time_label=d:DAY;h:HOUR;m:MIN;s:SEC&
&time_zone=Local time&
&event_time=year:2014;month:1;day:1;hour:0;minute:0;seconds:0&
&event_duration=year:0;month:0;day:0;hour:0;minute:0;seconds:0&
&event_recursion=yearly&
&onpress_url=-&
&event_onpress_url=-&
&title=Novy rok je za:&
&event_title=event&
&sound_file=-&
&event_sound_file=-&
&transparent=true&
" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
</object><div class="overlay"></div></div>
