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

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;
}

小提琴