Webページの背景透明度と文字透明度を変える方法

Webページの背景透明度と文字透明度を変える方法　CSS

はじめに

CSSにてopacityプロパティではなくrgbaを使って透明度を分離する方法を書いていきます。
特にHTML,CSSを学び初めの時はopacityプロパティを学んで背景を透明にできると学び実装してしまいます。
しかし、opacityプロパティを使うと文字まで同じ透明度になってしまいます。
背景は少し薄くしたいけど文字は見えるようにしたい、、、ちょうど良くどちらもバランス良い透明度を試してみるしかないか。と思いがちですが今回記載するrgbaを使えば背景の薄さと文字の薄さを分離する事ができ、どちらも自分が思った透明度で表現する事ができます。
さっそくみていきましょう。

目次

はじめに
1. opacity
2. rgba
3. おわりに

1. opacity

HTML記述

HTML

<div class="job-me">
                <p class="job-comment">ABABABABABABABABABABABABABAB</p>
                <p class="job-comment">ABABABABABABABABABABABABABAB</p>
              </div>

CSS記述

CSS
.job-me {
  height: 150px;
  width: 1000px;
  margin-left: 50px;
  background-color: white;
  opacity: 0.2;
  color: black;
}

このようにbackground-color:とopacity:で書くとこのようにどちらも薄くなってしまいます。
↓

それではrgbaで書いてみましょう。HTMLは全く一緒ですね。

2. rgba

HTML記述

 
HTML

<div class="job-me">
                <p class="job-comment">ABABABABABABABABABABABABABAB</p>
                <p class="job-comment">ABABABABABABABABABABABABABAB</p>
              </div>

CSS記述

CSS

.job-me {
  height: 150px;
  width: 1000px;
  margin-left: 50px;
  background-color: rgba($color: white, $alpha: 0.2);
  color: black;
}

はっきりと文字を出すことができ、
綺麗に背景と文字の透明度を調整することができましたね。

3. おわりに

これでわざわざopacityプロパティを使わなくても背景を薄くして文字をはっきり表示する事ができましたね。
ちなみにrgbaを使うと背景の薄さだけではなく文字自体の濃さも調整する事もできます。
R(赤)が、204/255 ( 80％)
G(緑)が、255/255 (100％)
B(青)が、204/255 ( 80％)
というように文字によって色が決まっているので例のように％を自分で決めて文字の透明度も調整することが可能です。