Question

我正在使用placehold.it来制作一个正方形（当我在网站上需要颜色时）。见：

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

我试过以下： 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

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

1 个答案: