HTML/CSS

【CSS】背景色を透明・半透明にする方法(rgba)

本記事では、CSSで背景色を透明・半透明にする方法について解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

背景色を半透明にする

背景色を半透明にする方法が分からない方は、おそらく背景色を「red」「#f00」「rgb(255,0,0)」のいずれかで設定していると思います。

background: red;
background: #f00;
background: rgb(255, 0, 0);

残念ながら上記の3つでは、背景色を半透明にすることは出来ません。背景色を半透明にするには「rgba」を使う必要があります。

rgbaの使い方は以下のとおりです。

background:rgba(0, 0, 0, 1);

基本的な使い方は、rgbと全く同じで第一引数〜第三引数の値に0〜255の数値を設定します。

rgbと異なる点はrgbaでは第四引数に0〜1までの値を設定することが出来ます。この第四引数に設定した値によって背景色の透明率が変わります。

実際にrgbaの第四引数に0〜1までの数値を0.1間隔で設定し、どのように表示されるのか確認してみましょう。

<div class="container">
  <div class="box0">rgba(255, 0, 0, 0)</div>
  <div class="box1">rgba(255, 0, 0, 0.1)</div>
  <div class="box2">rgba(255, 0, 0, 0.2)</div>
  <div class="box3">rgba(255, 0, 0, 0.3)</div>
  <div class="box4">rgba(255, 0, 0, 0.4)</div>
  <div class="box5">rgba(255, 0, 0, 0.5)</div>
  <div class="box6">rgba(255, 0, 0, 0.6)</div>
  <div class="box7">rgba(255, 0, 0, 0.7)</div>
  <div class="box8">rgba(255, 0, 0, 0.8)</div>
  <div class="box9">rgba(255, 0, 0, 0.9)</div>
  <div class="box10">rgba(255, 0, 0, 1)</div>
</div>
div.container{
  display:flex;
  flex-wrap:wrap;
}

div:not(.container){
  display:flex;
  align-items:center;
  justify-content:center;
  width:200px;
  height:100px;
  margin-left:10px;
  margin-bottom:10px;
}

.box0{
  background:rgba(255, 0, 0, 0);
}

.box1{
  background:rgba(255, 0, 0, 0.1);
}

.box2{
  background:rgba(255, 0, 0, 0.2);
}

.box3{
  background:rgba(255, 0, 0, 0.3);
}

.box4{
  background:rgba(255, 0, 0, 0.4);
}

.box5{
  background:rgba(255, 0, 0, 0.5);
}

.box6{
  background:rgba(255, 0, 0, 0.6);
}

.box7{
  background:rgba(255, 0, 0, 0.7);
}

.box8{
  background:rgba(255, 0, 0, 0.8);
}

.box9{
  background:rgba(255, 0, 0, 0.9);
}

.box10{
  background:rgba(255, 0, 0, 1);
}

第四引数に設定した値が1に近づくほど背景色がクッキリ見えるようになることが確認出来ます。つまり、背景色を透明に近づけたい時は0に近い数値を設定し、少しだけ背景色を透明にしたい場合は1に近い数値を設定します。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村