テキスト背景を透過させたい

Question

表題の通り、上部タイトル部分の画像を見ながら
テキスト部分の背景色を透過させたいという希望がありまして、実現せず、悩んでいます。
解決策を教えていただけると大変助かります。

##index.html

<section class="maingra">
<h1 id="title">
      タイトル一行目<br>
タイトル二行目<br>
タイトル三行目<br>
タイトル四行目</h1>
  </section>
 <section class="section01">
   <h2 class="h2_01">h2タイトル</h2>
   <p class="section01_text">本文<br>
本文<br>
本文<br>
<br>
本文
<br>
<br>
本文</p>
 </section>

##style.css

.maingra{
  background-image:url(../images/main_bg.png);
  background-repeat: no-repeat;
background-attachment: fixed;
  background-size: cover;
  height: 834px;
  background-color: #121212;
	height: 900px;
  
}
#title{
  font-size:32px;
  line-height: 2.4em;
  color: #efefef;
  letter-spacing: .15em;
  padding-top:160px;
  padding-left:220px;
  padding-bottom:160px;
}
#title::before{
  display: block;
  content:url(../images/logo.png);
  left:-60px;
  position: relative;
  top:-10px;
}
.section01{
background: rgba(18,18,18,0.5);
	 z-index:-2;
  
  position: relative;
  width: 100%;
  height:900px; 
	padding-top:20px;
	padding-bottom:20px;
}

.h2_01{
	
  font-size:18px;
  text-align: center;
  color: #efefef;
  letter-spacing: .15em;
  position: relative;
}
.h2_01::before{
  display: block;
  content:url(../images/h2_logo01.png);
  position: relative;
margin:20px auto 0 auto;
  
}
.h2_01::after{
  display: block;
  content: "";
  width: 222px;
  height: 2px;
  background-color: #ebb261;
	margin: 10px auto 0 auto;


  
  

}
.section01_text{
  width:408px;
  margin:80px auto;
  line-height: 2em;
  text-align: justify;
}

上記.section01の
background: rgba(18,18,18,0.5);
が透過せず、グレーのような色表現となってしまっております。
お知恵をお借りできたら幸いです。
どうぞよろしくお願いします。

Answer 1

section01がmaingraの下にあるのだから重ならないし、
背景白の上に不透明50%で重なってる状態です。

希望の状態か分かりませんが、
一応写真の上に不透明50%になりました。

body{
  background-image:url(../images/main_bg.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.section01{
  background-color: rgba(18,18,18,0.5);
  width: 100%;
  height:900px; 
  padding: 20px 0;
}

背景をbodyに設定したくないなら
sectionを入れ子にするとかして下さい。

Comments

[ema-material]

ありがとうございました。
ハマってしまって冷静に見ることができていませんでした。ご回答に感謝します。