Html 如何将文本放置在这样的图像上方？

我必须为我的网页设计课重新制作一个网页。我已经完成了其余部分，但是如何在图像上添加一个白色框，并将文本放置在框中？比如上面写着“徒步旅行”或“徒步旅行”或“露营”。我应该用潜水艇吗

基本上，我如何使它看起来像这样：

我应该使用

对。通过使用

元素，这将允许您对要使用的所有单个元素（例如图像、消息框等）进行极高级别的控制

背景 一种常见的方法是通过

background

属性将CSS与

一起用作图像，类似的内容还包括其他几个控制大小、位置等的属性：

.pretty-background {
      /* Settings for your image */
      background: url('yourimage.png');
      background-size: cover;
      background-position: center;
      /* Size info */
      height: 400px;
      width: 100%;
      /* Positioning (important as it dictates how child elements will be positioned) */
      position: relative;
}

。漂亮的背景{
/*图像的设置*/
背景：url（'https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
背景尺寸：封面；
背景位置：中心；
/*尺寸信息*/
高度：400px；
宽度：100%；
/*定位（这很重要，因为它指示如何定位子元素*/
位置：相对位置；
}

---

试试这段代码。您可以在第二部分使用网格结构。这是您的解决方案。您可以根据需要使用主div的高度和宽度

CSS:

HTML:

不寻常的冒险
是时候探索你的道路了。你要去哪里

流行文章
徒步旅行
沿着冰川边缘跋涉，穿过野花盛开的山谷、蜿蜒的溪流，欣赏青绿色的冰川湖泊。这就是在落基山脉徒步旅行，那里有无数可供漫步的地方和无尽的纠结小路

露营
没有什么比在迷人的古老山顶露营更能让人感觉你是大自然的一员了。骑马穿过令人窒息的蓝色湖泊，在森林里安静地散步，或者去观鸟，真正远离这一切

尝试以下代码：

.white\u框{
背景图像：url（您的图像路径）；
高度：65vh；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
位置：相对位置；
}
.white_box_文本{
填充：15px；
宽度：350px；
背景色：#fff；
位置：绝对位置；
底部：25px；
左：25px；
}
h3{
边缘顶部：20px；
字体大小：40px；
左边距：10px；
}
氢{
字体大小：42px；
字体系列：“Fjalla One”，无衬线；
颜色：rgb（60 61 64）；
}
p{
字体大小：16px；
字体系列：Arial、Helvetica、无衬线字体；
颜色：rgb（60 61 64）；
}
.红盒子{
背景色：rgb（134,25,25）；
宽度：640px；
高度：12px；
左边距：10px；
}
h4{
字体大小：24px；
字体系列：“Fjalla One”，无衬线；
颜色：rgb（60 61 64）；
}

不寻常的冒险
是时候探索你的道路了。你要去哪里

流行文章

欢迎使用堆栈溢出。请使用此链接了解如何在图像上放置文本这是否回答了您的问题？

.white_box {
    width: 430px;
    height: 200px;
}
h2 {
    font-size: 48px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}
p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(60 61 64);
}
.red_box {
    background-color: rgb(134, 25, 25);
    width: 640px;
    height: 12px;
    margin-left: 10px;
}

h4 {
    font-size: 24px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
}

.pretty-background {
      /* Settings for your image */
      background: url('yourimage.png');
      background-size: cover;
      background-position: center;
      /* Size info */
      height: 400px;
      width: 100%;
      /* Positioning (important as it dictates how child elements will be positioned) */
      position: relative;
}

  .white_box {
    width: 500px;
    height: 500px;
    position: relative;
  }
  .image_div {
    width: 100%;
    height: 100%;
  }
  .image_div img {
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
  }
  .content_div {
    position: absolute;
    background-color: #fff;
    bottom: 10px;
    left: 30px;
    right: 30px;
    padding: 10px;
  }
  .red_box {
    background-color: rgb(134, 25, 25);
    width: 640px;
    height: 12px;
  }
  p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(60 61 64);
  }
  h2 {
    font-size: 30px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
  }
  h3{
    margin-bottom: 0;
  }
  h4 {
    font-size: 24px;
    font-family: 'Fjalla One', sans-serif;
    color: rgb(60 61 64);
 } 

  <div class="white_box">
  <div class="image_div">
    <img src="download.jpg">
  </div>
  <div class="content_div">
    <h2>ADVENTURES OFF THE BEATEN PATH</h2>
    <p>It's time to explore your path. Where will you go?</p>
  </div>
</div>

<h3>POPULAR ARTICLES</h3>
<div class="red_box"></div>

<div class="hiking">
  <img src="images.jpg" alt="trail" title="trail">
  <h4>HIKING</h4>
  <p>Trek along the edges of a glacier, through wildflower-filled valleys, meandering streams, and admire the turquoise blue glacier-fed lakes. This is hiking in the Rockies where there are countless places to roam and an endless tangle of trails.</p>
</div>  

<div class="camping">
  <img src="images.jpg" alt="tent" title="tent">
  <h4>CAMPING</h4>
  <p>There’s nothing quite like camping among stunning ancient mountain tops and feeling like you’re one with nature. Take a ride through breathtaking blue lakes, go for quiet walks in the forest, or go bird watching to truly get away from it all.</p>
</div>