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 截取的屏幕截图，显示我的页面当前的样子：

我正在尝试将 "slider title" 后面的蓝色条带设置为横跨后面图像的整个宽度。我错过了什么吗？我尝试了几种不同的方法，但似乎没有任何效果:(

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);
}

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

h1 background color won't stretch to image width

html

css

background

stretch