如何在占位符图像上放置文本

Question

我正在使用placehold.it生成一个正方形（在网站上时，我需要它作为颜色）。 看到：

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

我还要在每个方框上写一些文字。 当我使用提供的文本输入时，它变得很小并且不可读。 因此，我尝试在此图像上放置我自己的文本。

我尝试了以下操作： 如何在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;
}

小提琴