html - 如何将文本放在占位符图像上

Question

我正在使用 placehold.it 生成一个正方形(在网站上时我需要它来显示颜色)。参见:

http://jsfiddle.net/3s3Zb/2/

我还想在每个框上添加一些文字。当我使用提供的文本输入时，它变得很小且不可读。所以我试图在这张图片上加上我自己的文字。

我试过以下: How to position text over an image in css

它的 CSS:

#container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}
#text
{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}

但如果我将复选框放入容器中，它就会停止正常工作(它会变回正常的复选框)。

如果您能告诉我如何在每个正方形/或我遗漏的地方放置文字，那就太好了。

Answer 1

您只需要绝对定位文本。试试这个；

HTML

<td>
  <label class="fb" for="11">
    <div>Some text here</div>
    <input id="11" type="checkbox" name="fb" value="11" />
    <img src="http://placehold.it/150/0.8&text=asdasdasddasdaasd">
  </label>
</td>

CSS

.fb {
     position:relative;   
}
.fb div {
    position:absolute;
}

fiddle