如何在具有透明背景的 Div 上放置另一个 Div？

Question

我想在另一个div(2)的顶部放置一个背景透明的div(1)，因为我希望div(2)中包含的所有元素都被禁用。所以，如果我把div(1)放在div(2)的上面，那么div(2)内部的元素将不再可点击。

- Mahesh Thumar

Answer 1

只需使用Z-index属性即可。

//inner div 
    .div1
    {
     z-index : 1;
    }

//outer div

    .div2
    {
     z-index : 10;
    }

将div2覆盖在div1上。

还可以查看现有的问题答案：如何将一个div覆盖在另一个div上

- Pranay Rana

Answer 2

使用z-index属性来控制两个DIV的层级关系。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

对于DIV 1，可以使用以下代码：

opacity:0.5

不幸的是，所有版本的IE浏览器都不支持透明度（opacity）属性。

- Mo.

---

查看我的IE不透明度答案；它肯定在IE 8和9中有效，但我认为它在IE 6和7中也有效。 - ClarkeyBoy

@ClarkeyBoy IE 6、7和8不支持透明度 :( - Mo.

呃...好吧，老实说微软公司总是在工作中制造麻烦... :D - ClarkeyBoy

@ClarkeyBoy
没错 即使是IE10也不支持一些CSS3特性 :( - Mo.

有IE10？该死..又要支持一个浏览器了。为什么微软不能承认他们的浏览器很烂，然后继续前进呢？:D - ClarkeyBoy

@ClarkeyBoy 看看这个网站[链接]http://www.findmebyip.com/litmus你可以在这个网站上看到比较列表作为一名开发者，我对IE不满意。 - Mo.

Answer 3

Pranay 是正确的。我个人使用这种技术来制作叠加层；例如：

#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;
}

- ClarkeyBoy

Answer 4

我也需要它，但我使用这段代码：

<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=Nový 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>

- devondre

Answer 5

您可以在内容上添加一个透明的覆盖层，就像这样：

http://jsfiddle.net/andresilich/WHEK3/1/

- Andres Ilich

---

@Andres Ilich，我认为你的fiddle有一些问题。 - Parag Jadhav

请根据Parag的要求更新您的fiddle。 - Ramesh Pareek

破琴，需要修理。 - Rocco The Taco

修复这个小提琴。 - dianesis