h1背景颜色不会拉伸到图像宽度

Question

这是我的HTML＆amp; 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的截图，显示了我的网页目前的样子：

我试图设置蓝色条带＆＃34;滑块标题＆＃34;伸展图像的整个宽度。我错过了一些东西吗？我尝试了一些不同的方法，但似乎没有任何方法可行：（

Answer 1

Spans是默认的内联元素，你可以添加＆＃39; display：block＆＃39;到h1 span或使它成为一个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);
}