本記事では、CSSで背景色を透明・半透明にする方法について解説しています。
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
| 著者 | Mana |
|---|---|
| 発売日 | 2019/3/16 |
| ページ数 | 280ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (2,167件) |
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
背景色を半透明にする
背景色を半透明にする方法が分からない方は、おそらく背景色を「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に近い数値を設定します。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
