HTML/CSS полный фон наложения ДИВ в другой DIV

Question

У меня есть простой < DIV> (без фиксированного hegiht) с текстом в ней:

<div id="section"> 
<div class="container"> 
<h1>text</h1> 
<p>More text</p> 
</div> 
<!-- <div id="overlay"></div> --> 
</div> 

CSS-за это что-то вроде:

#section { 
    background: red; 
    overflow: hidden; 
} 

Можно ли добавить div с прозрачным фоном изображения?

Оверлейный оттенок должен находиться на главном красном фоне, но под текстом.

Я думаю, что это что-то вроде этого, но не работает:

#section #overlay { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100px; /* ??? */ 
    background: green; 
    opacity: 0.1; 
} 

Answer 1

#section { 
background: red; 
display: block; 
position: relative; 
overflow: hidden; 
} 
#container { 
position: relative; 
width: 100%; 
text-align: center; 
z-index: 9999; 
} 
#overlay { 
position: absolute; 
left: 0; 
width: 100%; 
height: 100%; 
top: 0; 
background-color: rgba(0,0,0,0.3); 
} 

Answer 2

попробовать ниже, например с помощью JQuery UI будет уменьшить усилия

<div id="dialog">Your non-modal dialog</div> 
<a href="#" id="open">Open dialog</a> 

    $('#open').click(function() { 
    $('#dialog').dialog('open'); 

}); 



jQuery(document).ready(function() { 
    jQuery("#dialog").dialog({ 
     autoOpen: false, 
     modal: true, 
     open: function(){ 
      jQuery('.ui-widget-overlay').bind('click',function(){ 
       jQuery('#dialog').dialog('close'); 
      }) 
     } 
    }); 
}); 

Answer 3

Если я правильно понять вас, как о чем-то как это:

HTML:

<div id="section"> 
    <div id="container"> 
     <h1>My background is transparent!</h1> 
     <p>More text</p> 
    </div> 
</div> 

CSS:

#section { 
    width: 300px; 
    background-color: red; 
} 

#container { 
    position: relative; 
    left: 50px; 
    width: 200px; 
    text-align: center; 
    background-color: rgba(0,0,0,0.3); 
} 

Результаты здесь: JSFiddle

Если это не то, что вы хотите, вы можете быть более конкретную информацию о позиционировании?