【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

背景色を半透明にする

背景色を半透明にする方法が分からない方は、おそらく背景色を「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);
}

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次