css 我的文本无法移动到背景图像之外

5kgi1eie 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(109)

我是一个新手开发者，刚刚开始创建他的第一个实际网页，我遇到了一些问题。有一些文本我放进一个flexbox，不会去下的形象。

.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>

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

css

来源：https://stackoverflow.com/questions/76386166/my-text-cant-move-past-the-background-image

1条答案

按热度按时间

nafvub8i1#

.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以使标题居中。可能看起来更好一点，如果你想试试的话：）

赞(0）回复(0）举报 2023-06-07

我来回答

css 我的文本无法移动到背景图像之外

1条答案

相关问题

热门标签

最新问答