我的文字无法移过背景图片

Question

我是一名刚开始创建他的第一个实际 web 页面的新手开发人员，我遇到了一些问题。 我在 flexbox 中输入了一些文字，但在图像下方不会显示为 go。

 .title { text-align: center; width: 500px; margin-left: auto; margin-right: auto; color: white } #hero { background-image: url("river.webp"); background-size: cover; padding: 10px 0 100px 0 } body { margin: 0 }.three { color: white; display: flex; flex-direction: row; gap: 10px; justify-content: space-around; padding-top: 100px }

 <div id="hero"> <h1 class="title">This is Cypress!</h1> <div class="three"> <h4>Lively malls</h4> <h4>Challenging Escape Rooms</h4> <h4>Relaxing on the lake</h4> </div> </div>

我尝试在顶部添加边距和填充。 但是，背景图像只是随文本放大。 我该如何解决这个问题？

Answer 1

 .wrapper { border: 1px solid #555; }.wrapper > img { width: 100%; }.title { text-align: center; width: 500px; margin-left: auto; margin-right: auto; } body { margin: 0 }.three { display: flex; flex-direction: row; gap: 10px; justify-content: space-around; padding-top: 100px }

 <div class="wrapper"> <img src="https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg"> <h1 class="title">This is Cypress!</h1> <div class="three"> <h4>Lively malls</h4> <h4>Challenging Escape Rooms</h4> <h4>Relaxing on the lake</h4> </div> </div>

嘿，我同意@ralph.m你应该使用普通的图像标签来实现这一点。 我为您创建了一个简短的片段，如果它有帮助请告诉我:) 您需要将 img src 属性更改为您的图像。

编辑：

 .three { color: #2337EC; display: flex; flex-direction: row; gap: 10px; justify-content: space-around; padding-top: 100px; }.three h4 { text-align: center; }

 <div class="three"> <div> <img src="mall.jpg"> <h4>Lively malls</h4> </div> <div> <img src="escape.jpg"> <h4>Challenging Escape Rooms</h4> </div> <div> <img src="relax.jpg"> <h4>Relaxing on the lake</h4> </div> </div>

如果你愿意，你可以试试这个。 本质上，我在您的div.three中的每个内容块周围添加了<div>并添加了 css 以使您的标题居中。 可能看起来好一点，如果你想尝试:)