CSSで要素の背景色を完全に透明にしたいときは、background-color: transparent;を指定します。背景だけを少し透かしたい場合は、rgb()のアルファ値を使います。
この記事では、背景画像の上に置いたボタンを例に、変更前の状態から透明・半透明・グラデーションへ変える手順を解説します。opacityとの違いも確認するので、用途に合う方法を選べるようになります。
background-colorを透明にする基本
background-colorは、要素の背景色を指定するCSSプロパティです。値にtransparentを指定すると、背景色が完全に透明になり、後ろにある色や画像が見えるようになります。
.button {
background-color: transparent;
}transparentはプロパティではなく、CSSで使える「透明色」を表すキーワードです。なお、background-colorの初期値もtransparentなので、別のCSSで背景色が設定されていなければ、もともと背景は透明です。
背景画像の上にボタンを作る
まずは変更前の状態を作ります。今回はindex.htmlとstyle.cssを用意し、imagesフォルダにbackground-image.jpgを保存します。
HTMLを記述する
button要素にクラス名buttonを付けます。ボタンの中にa要素を入れると操作できる要素が重なってしまうため、リンクとして使う場合はa要素だけでボタン風に装飾します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>透明な背景色のサンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image-wrapper">
<button class="button" type="button">ボタン</button>
</div>
</body>
</html>変更前のCSSを記述する
背景画像の上に、赤い背景色のボタンを配置します。display: gridとplace-items: centerを使うと、固定幅や絶対配置を使わずに中央へ配置できます。
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.image-wrapper {
display: grid;
place-items: center;
width: min(100%, 900px);
min-height: 400px;
margin-inline: auto;
padding: 24px;
background-image: url("images/background-image.jpg");
background-position: center;
background-size: cover;
}
.button {
padding: 16px 32px;
color: #fff;
font: inherit;
font-size: 1.5rem;
background-color: red;
border: 3px solid #fff;
border-radius: 10px;
cursor: pointer;
}この時点では、background-color: red;が指定されているため、ボタンの内側は赤色です。背景画像はボタンの後ろに隠れています。
ボタンの背景色をtransparentで透明にする
続いて、style.cssのボタンに指定した背景色を変更します。変更前は次の1行です。
background-color: red;redをtransparentへ書き換えます。セミコロンはCSSの宣言同士を区切る記号なので、複数の宣言を書く場合に必要です。最後の宣言では省略できますが、コードを追加したときのミスを防ぐため、末尾にも付けておきましょう。
.button {
padding: 16px 32px;
color: #fff;
font: inherit;
font-size: 1.5rem;
background-color: transparent;
border: 3px solid #fff;
border-radius: 10px;
cursor: pointer;
}ブラウザを更新すると、ボタンの背景色が完全に透明になります。白い文字と枠線はそのままで、内側から海の画像が見えることを確認してください。
背景色を半透明にする
transparentでは完全に透明になります。「白色を残しながら後ろの画像も見せたい」という場合は、色にアルファ値を加えます。アルファ値とは色の不透明度を表す値で、0は完全な透明、1は完全な不透明です。
現在のCSSでは、rgb()の色成分を空白で区切り、スラッシュの後ろにアルファ値を書く方法を使用できます。次の例は、白色を20%の不透明度で表示します。
.button {
background-color: rgb(255 255 255 / 20%);
}ブラウザでは、白い背景色が薄く残り、その後ろにある海の画像も見えます。完全に透明なtransparentより、文字の周囲を見やすくしたい場面に向いています。
従来のrgba(255, 255, 255, 0.2)という書き方も利用できます。アルファ値を使った背景色について詳しく知りたい方は、次の記事も参考にしてください。
transparentとopacityの違い
background-color: transparent;は背景色だけを透明にします。そのため、要素内の文字、画像、枠線は透明になりません。
一方、opacityは要素全体の不透明度を変更します。ボタンにopacity: 0.5;を指定すると、背景色だけでなく、文字と枠線も一緒に薄くなります。
/* 文字と枠線を含むボタン全体が半透明になる */
.button {
opacity: 0.5;
}背景だけを透かして文字の読みやすさを保つなら、transparentまたはアルファ値付きの色を選びましょう。文字色と背景のコントラストが不足すると読みにくくなるため、背景画像が明るい場合は暗い半透明色を使うなどの調整も必要です。
透明色をグラデーションに使う
transparentは単色の背景だけでなく、グラデーションの色としても使えます。次の例では、中央を透明にし、外側へ向かって白くなる円形グラデーションをボタンに指定します。
.button {
background: radial-gradient(transparent, #fff);
}グラデーションは画像として扱われるため、background-colorではなくbackgroundまたはbackground-imageへ指定します。
横方向や縦方向へ色を変える場合はlinear-gradient()を使用します。詳しい指定方法は、次の記事で解説しています。
透明にならないときの確認ポイント
transparentのスペルが正しいか確認します。- 同じ要素に、より優先度の高い背景色が指定されていないか確認します。
background-imageや疑似要素の背景が重なっていないか確認します。- 透明にした要素の後ろに、見せたい色や画像があるか確認します。
背景色を透明にしても要素そのものが消えるわけではありません。余白、枠線、文字、クリックできる範囲などは残ります。
まとめ
背景色を完全に透明にする場合は、background-color: transparent;を使います。背景色だけを半透明にする場合は、rgb(255 255 255 / 20%)のようにアルファ値を指定します。
opacityは文字や枠線を含む要素全体に影響する点が異なります。何を透明にしたいのかを確認し、目的に合う方法を選んでください。