本記事では、CSSで背景色を透明・半透明にする方法について解説しています。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著: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);
}
