<div class="touka">
    <h1>opacity0.9で透過設定</h1>
  </div>

<hr>
<p>透明度0.4で設定</p>

<div class="touka2">
    <h1>opacity0.4で透過設定</h1>
  </div>


<hr>
<p>バックグラウンドの背景に透明度0.5で設定</p>
 <div class="home_content1">
     <h1>opacityで指定</h1>
     <p>文字も透明化してる</p>
 </div>



<hr>
<p>バックグラウンドの背景に透明度0.2で設定</p>
<div class="home_content">
     <h1>rgbaで指定</h1>
     <p>背景だけが透明化してる</p>
</div>


<hr>
<p>バックグラウンドの背景に透明度0.7で設定</p>
<div class="home_content2">
     <h1>rgbaで指定</h1>
     <p>背景だけが透明化してる</p>
</div>


<hr>
<p>カーソルをあわせた時に透明になる設定</p>

<div class="home_content3
            ">
     <h1>rgbaで指定</h1>
     <p>カーソルあてると薄くなる</p>
</div>


<hr>
<p>カーソルをあわせた時に透明になる設定</p>

<div class="home_content4
            ">
     <h1>rgbaで指定</h1>
     <p>カーソルあてると薄くなる</p>
</div>
        

        
.touka {
  opacity:0.9
}

.touka2 {
  opacity:0.4
}


.home_content1 {
    text-align: center;
    margin-top: 10px;
    width: 500px;
    height: 150px;
    background-color: rgba(61, 55, 55);
    opacity: 0.5;
}




.home_content {
    text-align: center;
    margin-top: 10px;
    width: 500px;
    height: 150px;
    background-color: rgba(61, 55, 55, .2);
}



.home_content2 {
    text-align: center;
 　 margin-top: 10%;
    padding: 20px 5px;
    width: 500px;
    height: 150px;
    background-color: rgba(61, 55, 55, .7);
}



.home_content3 {
    text-align: center;
    margin-top: 10px;
    padding: 20px 5px;
    width: 500px;
    height: 150px;
    background-color: rgba(61, 55, 55, .7);
}

.home_content3:hover {
  opacity:0.5
}


.home_content4 {
    text-align: center;
    margin-top: 10px;
    padding: 20px 5px;
    width: 500px;
    height: 150px;
    background-color: rgba(61, 55, 55, .2);
}

.home_content4:hover {
  background-color: rgba(61, 55, 55, 1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.