CSS:Box + text over image

Question

首先,我想给你看一张图片(用油漆做的).

好的"当前"就是我现在所拥有的.我想在右边的图像上放置一个带有黑色背景的框,然后在此框中放置文本.

我尝试使用z-index等,但没有任何成功.这是我试过的:

<div> <!-- start div for image -->
  <img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
  <div style="margin: auto;">
    text text text
  </div>
</div>

但这没有任何好处.我怎样才能做到这一点？

Answer 1

像这样的东西？

http://jsfiddle.net/QGMPB/1/

HTML:

<div id="wrap">
    <img src="http://jsfiddle.net/img/logo.png" />
    <div id="text">text</div>
</div>

CSS

#wrap {
    position:relative; /* make this relative to have the inner div absolute without     breaking out */
    width: 200px;  /* fix the width or else it'll be the entire page's width */
    background: silver; 
    border: 1px solid grey
}

#text {
    position: absolute; 
    width: 40px; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: black; 
    color:white
}

Answer 2

对于这样一个简单的问题,你的代码很乱并且过于复杂,只需使用两个元素就可以简化它.越简单越好.

请指明您是否需要<img>标签.

HTML:

<div id="golf_course">
    <div class="text_wrap_right">
        text text text text
    </div>
</div>

CSS:

#golf_course
{
    background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG);
    background-position: 0 -200px;
    width: 900px;
    height: 259px;
    border: 5px solid #000;
}

.text_wrap_right
{
    width: 300px;
    height: 100%;
    float: right;
    background: #000;
    color: #fff;
    border-left: 2px solid #000;
}

这里有一个例子:http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/