【CSS】背景色だけ透過させる方法｜rgba・color-mix・実務パターンまで完全解説

HTML/CSS

2022.11.042026.03.05

opacity で背景色を透過すると何が問題なのか

まず、多くの初心者がつまずく「opacity を使ったら子要素まで透明になった」という問題を確認しましょう。

/* opacity は要素全体（子要素含む）が透過される */
.overlay {
  background-color: #000;
  opacity: 0.5;  /* テキストも画像もすべて半透明に */
}

左のopacityではテキストまで薄くなっていますが、右のrgba()では背景だけが透過し、テキストは100%の濃さで表示されています。

opacity と背景色透過の違い

rgba() で背景色だけを透過する（基本）

背景色だけを透過させる最も基本的な方法は、背景色をrgba()で指定することです。

/* rgba(赤, 緑, 青, 透明度) */
.semi-transparent {
  background-color: rgba(0, 0, 0, 0.5);  /* 黒の50%透過 */
}

/* 現代的な構文（CSS Color Level 4）: スペース区切り + / */
.modern {
  background-color: rgb(0 0 0 / 50%);  /* 同じ結果 */
}

4番目の値（アルファチャンネル）が透明度です。0で完全に透明、1で完全に不透明になります。

CSS Color Level 4 の現代構文

CSS Color Level 4 以降、rgba()はrgb()のエイリアスになりました。つまり、rgb()に直接アルファ値を書けるようになっています。

/* 旧構文（引き続き有効） */
background-color: rgba(0, 0, 0, 0.5);

/* 現代構文（推奨） */
background-color: rgb(0 0 0 / 0.5);

/* パーセントでも指定可能 */
background-color: rgb(0 0 0 / 50%);

すべてのモダンブラウザで対応済みです。新規コードでは現代構文を使うことを推奨します。

hsl() / hsla() で直感的に透過させる

色相(Hue)・彩度(Saturation)・明度(Lightness)で色を指定するhsl()も、同様にアルファチャンネルを追加できます。

/* hsl(色相, 彩度, 明度 / 透明度) */
.blue-transparent {
  background-color: hsl(220 90% 56% / 0.5);  /* 半透明の青 */
}

.red-transparent {
  background-color: hsl(0 80% 55% / 0.3);    /* 薄い半透明の赤 */
}

hsl()は色相を0°〜360°の角度で指定するため、「青をもう少し緑寄りにしたい」「彩度を落としたい」といった色の調整がRGBより直感的です。

color-mix() でCSS変数の色を半透明にする

CSS変数（カスタムプロパティ）で色を管理している場合、rgba()では直接透明度を追加できません。この問題を解決するのがcolor-mix()関数です。

CSS変数 + rgba() の問題

:root {
  --brand-color: #3b82f6;
}

/* これは動かない */
.overlay {
  background-color: rgba(var(--brand-color), 0.5);  /* エラー */
}

rgba()はR/G/B の数値を個別に受け取るため、#3b82f6のような16進カラーをそのまま渡せません。

color-mix() で解決する

:root {
  --brand-color: #3b82f6;
}

/* color-mix() で transparent と混ぜて透明度を作る */
.overlay {
  background-color: color-mix(in srgb, var(--brand-color) 50%, transparent);
}

/* 30%の濃さ（=70%透過）にしたい場合 */
.light-overlay {
  background-color: color-mix(in srgb, var(--brand-color) 30%, transparent);
}

color-mix(in srgb, 色A 割合%, 色B)で2つの色を指定した割合で混合します。transparentと混ぜることで、任意の色を任意の透明度にできるのがポイントです。

color-mix()は2023年にすべてのモダンブラウザで対応済み（Baseline 2023）です。

デザインシステムでの活用例

:root {
  --primary: #3b82f6;
  --danger: #ef4444;
  --success: #22c55e;
}

/* 1つの色から透明度バリエーションを自動生成 */
.btn-primary {
  background: var(--primary);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--primary) 85%, transparent);
}
.btn-primary:disabled {
  background: color-mix(in srgb, var(--primary) 40%, transparent);
}

/* アラート背景 */
.alert-danger {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  border-left: 4px solid var(--danger);
}
.alert-success {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  border-left: 4px solid var(--success);
}

相対カラー構文（Relative Color Syntax）

CSS Color Level 5 で導入された相対カラー構文を使うと、既存の色のアルファチャンネルだけを変更できます。

:root {
  --brand: #3b82f6;
}

/* 相対カラー構文: 元の色の r/g/b はそのままに、アルファだけ変更 */
.overlay {
  background-color: rgb(from var(--brand) r g b / 50%);
}

/* hslでも使える: 色相・彩度はそのまま、明度を上げてアルファを追加 */
.light-overlay {
  background-color: hsl(from var(--brand) h s 80% / 40%);
}

fromキーワードで元の色を参照し、チャンネルを個別に上書きできます。r g bをそのまま書けば元の色のRGB値が維持され、/ 50%でアルファだけ変更されます。

/* 実用例: ホバーで色を10%明るく + 20%透過 */
.card:hover {
  background: hsl(from var(--brand) h s calc(l + 10%) / 80%);
}

/* テキストカラーから自動的に薄い背景色を生成 */
.tag {
  color: var(--tag-color);
  background: rgb(from var(--tag-color) r g b / 15%);
}

相対カラー構文は2024年にすべてのモダンブラウザで対応済み（Baseline 2024）です。

oklch() で知覚的に均一な透過を実現

oklch()はCSS Color Level 4で導入された色空間で、人間の知覚に基づいた均一な明るさを実現します。

/* oklch(明度 彩度 色相 / 透明度) */
.blue-transparent {
  background-color: oklch(60% 0.2 250 / 0.5);
}

.red-transparent {
  background-color: oklch(60% 0.2 25 / 0.5);
}

rgbでは同じ透明度0.5でも、色によって「濃く見える」「薄く見える」の差が出ます。oklchなら同じ明度パラメータ（L）で統一すると、どの色相でも同じ濃さに感じられます。ブランドカラーのバリエーションを作るときに特に有効です。

実務で使える透過パターン集

ここからは、実際のWebサイトでよく使う背景透過のコピペ可能なパターンを紹介します。

パターン1: モーダルの半透明オーバーレイ

/* モーダルの背景オーバーレイ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 60%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* モーダル本体 */
.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 25px 50px rgb(0 0 0 / 25%);
}

パターン2: すりガラス風ヘッダー（backdrop-filter）

/* スクロール追従のすりガラスヘッダー */
.glass-header {
  position: sticky;
  top: 0;
  background: rgb(255 255 255 / 70%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);  /* Safari対応 */
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  z-index: 50;
}

rgba()の半透明背景とbackdrop-filter: blur()を組み合わせることで、Apple風のすりガラス効果を実現できます。

パターン3: カード画像の上にカラーオーバーレイ

/* 画像の上に半透明オーバーレイ + テキスト */
.card-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.card-overlay img {
  width: 100%;
  display: block;
}

.card-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 80%) 0%,
    rgb(0 0 0 / 0%) 60%
  );
}

.card-overlay .text {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: #fff;
  z-index: 1;
}

画像の下部にかけて黒が濃くなるlinear-gradientをかぶせることで、テキストの可読性を確保しつつ画像も見せる定番テクニックです。

パターン4: ヒーローセクションのダーケニング

.hero {
  position: relative;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

/* 擬似要素で背景画像の上にカラーフィルタ */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 50%);
}

/* ブランドカラーのオーバーレイにするパターン */
.hero-brand::before {
  background: rgb(59 130 246 / 60%);
}

パターン5: ツールチップの半透明背景

.tooltip {
  background: rgb(15 23 42 / 90%);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

パターン6: ローディング画面

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgb(255 255 255 / 80%);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgb(0 0 0 / 10%);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

グラデーション背景の透過

linear-gradient()やradial-gradient()でも透過色を使えます。

/* 左から右へフェードアウト */
.fade-right {
  background: linear-gradient(
    to right,
    rgb(59 130 246 / 80%),
    rgb(59 130 246 / 0%)
  );
}

/* 中央が透明な放射グラデーション（ビネット効果） */
.vignette {
  background: radial-gradient(
    circle,
    transparent 40%,
    rgb(0 0 0 / 60%) 100%
  );
}

mix-blend-mode で透過風の表現

mix-blend-modeを使うと、要素の色を下の要素と混合して透過に似た効果を作れます。

/* 乗算（multiply）: 暗い部分が残り、白は透明になる */
.multiply-overlay {
  background: #3b82f6;
  mix-blend-mode: multiply;
}

/* スクリーン（screen）: 明るい部分が残り、黒は透明になる */
.screen-overlay {
  background: #3b82f6;
  mix-blend-mode: screen;
}

/* オーバーレイ: 暗い部分はより暗く、明るい部分はより明るく */
.overlay-blend {
  background: #3b82f6;
  mix-blend-mode: overlay;
}

rgba()による透過が「色を薄くする」のに対し、mix-blend-modeは「色の合成方法を変える」アプローチです。写真加工のようなクリエイティブな効果が得られます。

ダークモード対応の透過設計

ダークモードでは、ライトモードと同じ透明度では見え方が変わります。prefers-color-schemeで切り替えましょう。

/* ライトモード */
.card {
  background: rgb(255 255 255 / 80%);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(0 0 0 / 10%);
}

/* ダークモード: 透明度を調整 */
@media (prefers-color-scheme: dark) {
  .card {
    background: rgb(30 41 59 / 80%);
    border: 1px solid rgb(255 255 255 / 10%);
  }
}

/* CSS変数 + color-mix() でテーマ対応 */
:root {
  --surface: #ffffff;
  --surface-transparent: color-mix(in srgb, var(--surface) 80%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1e293b;
    --surface-transparent: color-mix(in srgb, var(--surface) 80%, transparent);
  }
}

アクセシビリティ: 透過背景のコントラスト比

半透明背景の上にテキストを置く場合、WCAG 2.1のコントラスト比基準を満たす必要があります。

/* 注意: 透過度が高すぎるとテキストが読みにくくなる */

/* NG: 背景が薄すぎて白背景上で白文字が読めない */
.bad {
  background: rgb(0 0 0 / 20%);
  color: #fff;
}

/* OK: 十分な濃さを確保 */
.good {
  background: rgb(0 0 0 / 70%);
  color: #fff;
}

/* text-shadow で可読性を補助するテクニック */
.with-shadow {
  background: rgb(0 0 0 / 40%);
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

パフォーマンスの比較

透過の方法によってレンダリングコストが異なります。

backdrop-filterは見た目が美しい反面、スクロール領域で多用するとモバイルでカクつく原因になります。固定ヘッダーやモーダルなど限定的な場面で使うのがベストです。

まとめ: 方法の選び方チャート

背景色の透過はrgba()が基本ですが、CSS変数を使うプロジェクトではcolor-mix()や相対カラー構文が必須の知識になりつつあります。プロジェクトの要件に合わせて最適な方法を選択してください。

関連記事

• 【CSS】背景に透明色を指定する方法
• 【CSS】背景をぼかす方法
• 【HTML/CSS】Webページで画像を半透明に表示させる方法
• 【CSS】グラデーションを作成する方法
• 【CSS】backdrop-filterの使い方｜背景ぼかし・明るさ調整を一発適用
• 【CSS】backdrop-filterでガラス風デザインを実装する方法