Html 如何在一个框中写入文本，使其只覆盖框的50%？

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

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

HTML:

---

您可以尝试增加p_box1的填充，如 填充：50%2%02%

这应该为你在顶部购买一些填充空间，它可能会增加框的高度，但是，你可以根据需要降低高度，或者将文本包装在另一个div或p中，并为其提供50%的顶部边距，或者你需要多少边距。。。。

---

如果您有一个JSFIDLE示例或一些实时链接，我们可以给出明确的解决方案…

仅使用css似乎是不可能的。你也应该考虑JavaScript。为了解决这个问题，我在内容中包装了一个

div

，在css中进行了更改，并在javascript中添加了一些代码

以下是HTML代码：

<div id="p_box1">
    <div class="main">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/>
    </div>
</div>

Javascript

var main = document.getElementsByClassName('main')[0];
var container = document.getElementById('p_box1');

function adjustImage() {
    var height = main.offsetHeight * 2 + "px";
    container.style.height = height;
}
adjustImage();

window.onresize = adjustImage;

---

无法访问图像。给我们图片的尺寸，或者把图片加在这里。这必须是背景图像吗。。。图像是否绝对不被视为“内容”，它是否纯粹是表象？2.为什么要把它放在段落元素（

p

）中？先生，它不一定是背景图像，但是，图像应该有边框，就像现在一样。文本应位于图像下方，边框（或框）内有配件。第二，我不知道原因。我是一个新的学习者。这样做可能不是好的做法。也就是说，请帮助我改进。你能给图片添加链接吗？这将有助于：）@user3649548检查下面我的答案。填充顶部的百分比与宽度有关，而不是与高度有关。所以这是行不通的。在这种情况下，

padding-top:50vh

我认为会起作用。

vw

和

px

？绝对不是。。我想

vh

会的，但我不能用它来解决这里的问题。如果可以提供jsfiddl或live链接，它会更容易。用另一个元素包装文本并给它一些页边空白可能会有所帮助…@BhavanKuchibhotla这里是可行的方法。（添加图像）填充：50%2%18px2%；似乎工作，你可以发挥50%左右，以你的需要…非常感谢你，我相信它会解决。最后一个问题：如果我有6个相似的盒子，并且对每个盒子做相同的事情，会怎么样。然后在这个javascript代码中：var container=document.getElementById（'p_box1'）；我需要把每个盒子的所有id都放进去，然后它就可以工作了吗？

<div id="p_box1">
    <div class="main">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/>
    </div>
</div>

#p_box1 {
    padding: 18px 2%;
    border: 3px solid Crimson;
    float: left;
    /*
    width: 29.333333%;
    */
    width: 20.333333%;
    /*original starts*/
    margin: auto 2%;
    /*original ends*/
    margin-left:120px;
    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    -ms-border-radius:7px;
    -o-border-radius:7px;
    background:url("http://lorempixel.com/200/200") no-repeat;
    background-size: 100% 50%;
}
.main {
    transform: translateY(100%);
}

var main = document.getElementsByClassName('main')[0];
var container = document.getElementById('p_box1');

function adjustImage() {
    var height = main.offsetHeight * 2 + "px";
    container.style.height = height;
}
adjustImage();

window.onresize = adjustImage;