-
HTML/CSS
background-colorの色を透明（alpha値）にする方法
「background-colorで背景色を透明な色にするにはどうすればいいのだろう…。」そんなお悩みありませんか？
この記事では、「background-colorで背景色を透明な色にする方法」と「背景色を透明な色にする場面の例」の2つを解説していきます。
それではまず、背景色を透明な色にする方法を見ていきましょう。
【CSS】background-colorの色を透明な色にする方法
背景色を透明な色にする方法として以下の2つがあります。
- rgba値を設定する
- opacityを使う
それぞれ説明していきます。
rgba値を設定する
まずは、rgba値を使う方法です。
下の図を見てください。
背景の色が透明な色になっているのがわかります(ちなみにこれは、純粋な緑色の透明度を上げています)。
先ほどの図のコードは以下のようになります。
<div id="background"></div>#background {
width: 120px;
height: 120px;
background-color: rgba(0, 128, 0, 0.2);
}上のように、background-colorの値のところにrgba値が書かれています。
rgbaはred(赤)、green(緑)、blue(青)、alpha(アルファチャネル)の頭文字を取ったものです。
コードを書くときは、「rgba(赤の数値, 緑の数値, 青の数値, 透明度の数値)」と書きます。
rgbの部分は0~255までの数値を入力します。
rgbは光の三原則に基づいています。つまり、rgb(255, 255, 255)のMAX値のとき色は白になるということです。
本題の透明度に関しては、rgbaのaの部分で設定をします。
aは0~1までの数値で設定します。
1から0に近づくほど透明になっていきます
1がデフォルトの状態で、0が完全に透明な状態ということです。
以上、背景色の透明度を変える方法としてrgba値の使用が挙げられるということでした。
opacityを使う
つづいて、「opacity」を使う方法です。
opacityはCSSのプロパティです。
下の図を見てください。
透明度が高く、薄い色が表示されています。
これは赤色の透明度を上げた色になります。
先ほどの図のコード以下のようになります。
<div id="background"></div>#background {
width: 120px;
height: 120px;
background-color: red;
opacity: 0.15;
}background-colorをredに設定し、opacityの値を0.15にしています。
opacityも0~1までの数値を決め、0に近づくにつれて透明になっていきます。
注意すべき点は、rgba値が「値」だったのに対し、opacityは「プロパティ」だということです。
よってopacityは、文字を含んだ要素に使うと、背景色だけでなく文字の色もすべて透明になります。
文字をふくむ要素で、かつ背景色だけを透明にしたい場合はrgba値を使いましょう。
以上、色の透明度を変える方法として、CSSのopacityプロパティがあるということでした。
背景色を透明な色にする場面の例3選
背景色を透明にする場面の例として以下の3つをつくるときを紹介します。
- ヘッダー
- 文字を書くブロック
- ボタン
それぞれみていきましょう。
ヘッダー
ヘッダーの背景色を透明にする例を見ていきましょう。
下のヘッダーを簡略して描いたものを見てください。
<header>
<h1>これはヘッダーです</h1>
<p>
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</p>
</header>header {
width: 100%;
height: 530px;
position: relative;
background-color: rgba(0, 128, 0);
}
header h1 {
position: absolute;
top: 170px;
left: 120px;
font-size: 50px;
}
header p {
position: absolute;
top: 260px;
left: 120px;
}上のような色だとべたっとした印象になります。
下のようにコードを書き換えて出力してみましょう。
header {
width: 100%;
height: 530px;
position: relative;
background-color: rgba(0, 128, 0, 0.7);
}
背景色の透明度が上がり、やわらかでさっきよりは洗練された印象が生まれました。
文字を書くブロック
つづいて、文字を書くブロックをつくる場面です。
セクションに関してもヘッダーと同じです。
下の図を見てください。
<div id="wrapper">
<div class="block">
<p>
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</p>
</div>
<div class="block">
<p>
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</p>
</div>
<div class="block">
<p>
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</p>
</div>
</div>#wrapper {
display: flex;
justify-content: center;
}
.block {
width: 300px;
height: 350px;
padding: 20px;
background-color: rgba(0, 0, 255, 0.2);
box-sizing: border-box;
}
.block:nth-child(2) {
margin-right: 10px;
margin-left: 10px;
}
.block p {
line-height: 50px;
}背景色の透明度を上げて文字を見やすくしています。
透明度を指定しない場合は以下のようになります。
もともとは濃い青色だったのがわかります。
以上、文字を各ブロックの背景色の透明度を上げる例でした。
ボタンの色
つづいてボタンの色です。
ここでは、ホバー時(カーソルが上にくるとき)に透明度を変えてみましょう。
以下のようにボタンをつくりました。
<div id="btn"><a href="#">ボタン</a></div>#btn {
width: 78px;
height: 50px;
padding-top: 13px;
text-align: center;
box-sizing: border-box;
background-color: rgb(255, 127, 80);
border-radius: 5px;
}
#btn a {
text-decoration: none;
color: white;
}このCSSに下のようなホバー時のスタイルのコードを追加します。
#btn:hover {
background-color: rgba(255, 127, 80, 0.8);
}するとカーソルをボタンに合わせたときに下のような色になります。
ボタンの色の透明度が上がり、色が少しだけ薄くなっているのがわかります。
ホバーした際にボタンの色の透明度を変更するデザインはよくあるので、おさえておきましょう。
(補足)画像を透明にする
さいごに、派生知識として画像の透明度を変える例を紹介します。
結論から言うと、opacityを使います。
下の画像を見てください。
<img src="image1.jpg">img {
width: 350px;
height: 270px;
}この画像に対して以下のCSSを追加します。
opacity: 0.3;出力すると以下のようになります。
画像の透明度が上がりました。
画像の透明度を上げるデザインも参考にしてみてください。
まとめ
いかがでしたでしょうか。
background-colorで背景色を透明な色にする方法について理解が深まったことでしょう。
色の透明度を操作できるようになるとデザインに幅を利かせることができます。
また、透明な色だとふわっとしてオシャレな印象を与えられる可能性があります。
ぜひ、今回の知識を実践してみてください。
