透明前景 [英] Transparent foreground

问题描述

我想为 div 元素添加半透明均匀层作为前景。

解决方案

您可以使用这个CSS ...

  div.parent {
 position：relative; 
} 
 
 / *这个div是上面的div的后代* / 
 div.child {
 position：absolute; 
 top：0; 
 right：0; 
 bottom：0; 
 left：0; 
 opacity：.6; 
 background：#fff; 
} 
  

如果您希望鼠标事件通过 覆盖，请添加 https://developer.mozilla.org/en/CSS/pointer-events =nofollow> pointer-events：none 到 div.child 。

您已将其标记为jQuery，因此要添加此 jQuery ...

  $（'div.parent'）。append（'< div class =child/> ;'）; 
  

I would like to add a semi-transparent uniform layer as a foreground for a div element. What is the best way to do that?

解决方案

You could use this CSS...

div.parent {
   position: relative;
}

/* this div is a descendent of the div above */
div.child {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: .6;
   background: #fff;
} 

jsFiddle.

If you want mouse events to go through this cover, add pointer-events: none to the div.child.

You tagged it jQuery, so to add this child element via jQuery...

$('div.parent').append('<div class="child" />');

这篇关于透明前景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！