html - 在深色图像上放置一个 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

绝对定位:

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