h1背景色不會拉伸到圖像寬度

Question

這分別是我的HTML和CSS：

的HTML

<section class="slider">
  <div class="row">
    <div class="large-12 column">
      <div style="position:relative">
        <img src="img/code.jpg" alt="Code Image">
        <h1><span>slider title</span></h1>
      </div>
    </div>
  </div>
</section>

的CSS

 h1 {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}

h1 span {
  width: 100%;
  color: white;
  font-size: 1rem;
  letter-spacing: 2px;
  background-color: rgba(30, 59, 69, 0.8);
}

這是通過Imgur截取的屏幕截圖，顯示了我的頁面當前的外觀：

我正在嘗試在“滑塊標題”后面設置藍色條帶，以延伸到整個圖像寬度。 我有什么想念的嗎？ 我嘗試了幾種不同的方法，但似乎沒有任何效果:(

Answer 1

跨距默認是內聯元素，您可以將'display：block'添加到h1跨距中，也可以將其設置為div（默認情況下為塊元素）。

當您想在其他地方使用h1標簽時，我也可能會修改代碼以使事情變得更容易。

HTML：

<section class="slider">
  <div class="row">
    <div class="large-12 column">
      <div style="position:relative">
        <img src="img/code.jpg" alt="Code Image">
        <h1 class='slide-title'>slider title</h1>
      </div>
    </div>
  </div>
</section>

CSS：

.slide-title {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  color: white;
  font-size: 1rem;
  letter-spacing: 2px;
  background-color: rgba(30, 59, 69, 0.8);
}