html - 如何在框中写入文本，使其仅覆盖框的 50%？

Question

我有一个盒子，里面有 50% 的背景图片。现在我想在剩下的 50% 框中插入文本，这样文本就不会覆盖图片。

我会告诉你我做了什么。现在，文字覆盖了图像。但我想要图片正下方的文字。

HTML:

<p id="p_box1">Text goes under the image . Text goes under the image
    <br/>Text goes under the image . Text goes under the image
    <br/>Text goes under the image . Text goes under the image
    <br/>Text goes under the image . Text goes under the image
    <br/>
</p>

.CSS:

#p_box1 {
    padding: 18px 2%;
    border: 3px solid Crimson;
    float: left;
    /*
    width: 29.333333%;
    */
    width: 20.333333%;
    margin: auto 2%;
    margin-left:120px;
    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    -ms-border-radius:7px;
    -o-border-radius:7px;
    background:url("img_in/box_img_1.jpg") no-repeat;
    background-size: 100% 50%;
}

Answer 1

你可以尝试增加 p_box1 的填充，比如 填充:50% 2% 0 2%;

这应该在顶部给你一些填充空间，但它可能会增加框的高度，你可以根据需要降低高度，或者将文本包装在另一个 div 或 p 中并给它 margin-top 50%或者你需要多少…… 如果您有 jsfiddle 示例或一些实时链接，我们可以提供明确的解决方案...