html - Background-rgba 不适用于简单的片段？

Question

已经试了半个小时了，我还是不明白为什么这么简单的代码片段没有背景色:

#section3 {
  z-index: 5;
  overflow: hidden;
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 1);
}

h3 {
  position: relative;
  text-align: center;
  margin-top: 10vh;
  font-size: 2em;
}

<span id="section3">
    <h3>Unser Anspruch</h3>
</span>

JSFiddle

Answer 1

span 是行内 block 元素，因此不能给定高度

为了给它高度，你必须将它转换成 display:block 或 display:inline block

但正如@LGSon 所说，h3 绝不能放在span 元素中

不使用 span，而是使用 div 作为 div 是 display:block 默认

#section3 {
    z-index: 5;
    overflow: hidden;
    width: 100%;
    height: auto;
    background-color: rgba(250,0,0,1);
   }

h3{

    position: relative;
    text-align: center;
    margin-top:10vh;
    font-size: 2em;

}

<div id="section3">

            <h3>Unser Anspruch</h3>
</div>