將文本放在另一個div內的頂部div上-有解無憂

我想將文本放在包含影像的 div 上，并且該 div 位于另一個也有影像的 div 內。

.marioHeader {
  background-image: url("resources/marioBackground.jpg");
  background-size: 600px;
  height: 500px;
  background-position: bottom;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: repeat-x;
  background-color: #6096ff;
  margin-top: 50px;
  text-align: center;
}

.title {
  text-align: center;
}

.headermario {
  background-image: url("resources/banner.png");
  background-size: 600px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: red;
  height: 200px;
  width: 90%;
}

<div class="marioHeader">
  <h1 class="title">Super Mario</h1>
  <div class="headermario">
  </div>
</div>

它看起來像這樣：將文本放在另一個 div 內的頂部 div 上

我希望它看起來像這樣：將文本放在另一個 div 內的頂部 div 上

uj5u.com熱心網友回復：

您正在使用flexbox并且 flexbox 是默認row的，您應該將方向更改為列flex-direction: column

.marioHeader {
  background-image: url("resources/marioBackground.jpg");
  background-size: 600px;
  height: 500px;
  background-position: bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-repeat: repeat-x;
  background-color: #6096ff;
  margin-top: 50px;
  text-align: center;
}

.title {
  text-align: center;
}

.headermario {
  background-image: url("resources/banner.png");
  background-size: 600px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: red;
  height: 200px;
  width: 90%;
}

<div class="marioHeader">
  <h1 class="title">Super Mario</h1>
  <div class="headermario">
  </div>
</div>

uj5u.com熱心網友回復：

使用以下代碼：

    .marioHeader {
      background-image: url("resources/marioBackground.jpg");
      background-size: 600px;
      height: 500px;
      background-position: bottom;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-repeat: repeat-x;
      background-color: #6096ff;
      margin-top: 50px;
      text-align: center;
    }

    .title {
      text-align: center;
    }

    .headermario {
      background-image: url("resources/banner.png");
      background-size: 600px;
      background-repeat: no-repeat;
      background-position: bottom;
      background-color: red;
      height: 200px;
      width: 90%;
    }

    <div class="marioHeader">
      <h1 class="title">Super Mario</h1>
      <div class="headermario">
      </div>
    </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/481626.html

標籤：html css 图片背景图片

上一篇：鹡鸰圖片上傳：如何設定圖片的存盤位置？

下一篇：我應該向移動設備提供高解析度網站影像嗎？如何最小化下載大小？