现在，我的文本直接位于背景图像上方；但我想在背景图像上添加一个白框，这样我就可以将文本放在白框中(以更具视觉吸引力(。我试着把这个添加到我的CSS表中：
.white-box {
position: absolute;
background-color: #FFFFFF;
color: black;
width: 50px;
height: 50px;
padding: 20px;
}
HTML页面中的这个：
<body>
<div class="white-box">
Content
</div>
</body>
这不会改变我的网页，当我在网上搜索这个问题时，我只看到我已经尝试过的不同版本(如上所示(以下是我正在努力实现的
我感谢任何帮助！：(
查看此代码。如果图像放置在父元素上(在我的示例中，div.image是div.content的父元素(，则不需要使用position: absolute。
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.image {
min-height: 100vh;
background-image: url(https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg);
background-size: cover;
background-repeat: no-repeat;
padding: 30px;
}
.content {
background: white;
padding: 15px;
border-radius: 3px;
}<div class="image">
<div class="content">
<h1>What is Lorem Ipsum?</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>如果您想在文档主体上呈现图像，可以将image类添加到<body>中，而不是创建容器分区。
尝试检查网站及其使用的css。这会给你更好的想法，并进一步提高你的技能(：
我的方法是在外部div上设置背景图像，并将溢出设置为滚动，然后在其中创建具有白色背景的div。。如网站所示