这就是我想要实现的
图片上分隔3段的竖线有一个关于如何制作垂直线的教程，但没有关于如何在图像上这样做(图像是div标签中body内的背景，class="container")。
我尝试的是
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
}
/* Top left text */
.top-left {
color: black;
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
color: black;
position: absolute;
top: 8px;
right: 16px;
}
/* Centered text */
.top-centered {
color: black;
position: absolute;
top: 1.5%;
left: 50%;
transform: translate(-50%, -50%);
}
.centered {
color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.vl {
color: black;
position: absolute;
top: 50%;
left: 50%;
}<section>
<div class="container">
<img id="building-img" src="architecture-building-town-city1.jpg" alt="A tall Building">
<div class="bottom-left">Bottom Left</div>
<div class="top-left"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Id diam vel quam elementum pulvinar.
tincidunt vitae semper quis. </p></div>
<div class="v1"></div>
<div class="top-right">Top Right</div>
<div class="top-centered">Centered</div>
<div class="centered">centered</div>
</div>
</section>但是它甚至不显示竖线
这里我使用帮助网格实现分区，并使用div元素本身作为分区。此外，背景图像可以根据您的需要放置。在下面的例子中，我使用了整个身体，如果你愿意，你可以在容器下面这样做。
*{
padding : 0px;
margin: 0px;
}
body{
width:100%;
height:100%;
background: no-repeat url("https://images.pexels.com/photos/1662159/pexels-photo-1662159.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500") ;
background-size: cover;
}
.container{
height:100px;
width:95%;
display:grid;
grid-template-columns: 1fr 3px 1fr 3px 1fr;
justify-content:center;
align-items:center;
margin:30px auto;
}
.container>div{
text-align:center;
}
.border{
height:70%;
background-color:black;
border-radius:2px;
}<body>
<div class="container">
<div>Crispiest <br>crust</div>
<div class="border"></div>
<div>Certified<br> Safe</div>
<div class="border"></div>
<div>Extreme <br>Durability</div>
</div>
</body>