如何将一个 Div 放在另一个具有透明背景的 Div 上? [复制]

Posted

技术标签:

【中文标题】如何将一个 Div 放在另一个具有透明背景的 Div 上? [复制]【英文标题】:How to put a Div on another Div with transparent background? [duplicate] 【发布时间】:2011-11-14 12:16:41 【问题描述】:

我想在另一个 div(2) 的顶部放置一个具有透明背景的 div(1)。因为我想让 div(2) 包含的所有元素都禁用。所以,如果我将 div(1) 放在 div(2) 之上,那么 div(2) 内的元素将不再是点击器。

【问题讨论】:

【参考方案1】:

利用Z-index 属性就可以了。

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

//outer div

    .div2
    
     z-index : 10;
    

div2 覆盖 div1。

同时检查现有的问题答案:How to overlay one div over another div

【讨论】:

【参考方案2】:

对两个 div DIV 使用 z-index

http://www.w3schools.com/cs-s-ref/pr_pos_z-index.asp

使用

不透明度:0.5

对于 DIV 1。 不幸的是,所有的 IE 都不支持 opacity

【讨论】:

查看我对 IE 不透明度的回答;它当然适用于 IE 8 和 9,但我认为它也适用于 IE 6 和 7。 @ClarkeyBoy IE 6、7 和 8 不支持不透明度 :( meh.. 老微软吧?总是在工作中扔扳手...:D @ClarkeyBoy 是的,即使 IE10 也不支持某些 css3 功能 :( 有IE10? Dang it.. 另一个我们支持的浏览器。为什么 MS 不能承认他们的浏览器是垃圾并继续前进? :D【参考方案3】:

普拉奈是正确的。我个人将这种技术用于叠加;例如:

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

【讨论】:

【参考方案4】:

您可以在内容上添加透明覆盖,如下所示:

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

【讨论】:

@Andres Ilich 我认为你的小提琴有问题 请按照 Parag 的说法更新您的小提琴 小提琴坏了,需要修复【参考方案5】:

我和你一样需要它,但我使用以下代码:

<div class="content"><object type="application/x-shockwave-flash"   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>

【讨论】:

以上是关于如何将一个 Div 放在另一个具有透明背景的 Div 上? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

向上滚动时如何将一个div隐藏在另一个半透明的div后面

具有透明背景的元素上的 IE z-index 问题

如何将元素的背景颜色与 2 种半透明元素背景颜色匹配

如何将部分透明的图像放在 html 中的另一个图像上方?

使用 imagecopymerge 添加时具有透明背景的图像变为白色

如何创建具有不透明度的父 div,同时将文本的不透明度保持在 100% [重复]