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

背景图片需要在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 2

绝对位置：

以下是示例http://jsbin.com/nikafamo/1/edit?html,js,console,output

Answer 3

只需将其放入<div id="container">

即可

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

在暗图像上放置一个div

3 个答案: