把一个div暗图像

Question

对我有这样的代码：

<style> 
    #container { 
     position: relative; 
    } 
    div.overlay { 
     opacity: 0.6; 
     background-color: black; 
     position: absolute; 
    } 
</style> 

<div id="container"> 
<div style="width:200px; height:200px" id="background" class="overlay"></div> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/d/db/Sports_portal_bar_icon.png"width="200px" height="200px" /> 
</div> 

http://jsbin.com/baweseqo/1/edit。 我想添加一个文本的div。 我该怎么做？

Answer 1

做位置绝对：

她e就是这个例子http://jsbin.com/nikafamo/1/edit?html,js,console,output

Answer 2

背景图像需要在CSS中完成。该文本只是把在div：

CSS：

#container { 
position: relative; 
} 
div.overlay { 
opacity: 0.6; 
background-color: black; 
position: absolute; 
width:200px; 
height:200px; 
background-image: url(http://upload.wikimedia.org/wikipedia/commons 
/d/db/Sports_portal_bar_icon.png); 
} 
.colortext{ 
    color:cyan; 
} 

HTML：

<div id="container"> 
<div class="overlay"> 
<p class="colortext">your text</p> 
</div> 
</div> 

Answer 3

只是把这个里面的<div id="container">

<div> 
    <p>Text</p> 
</div>