Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

background-color

background-color は CSS のプロパティで、要素の背景色を設定します。

背景カラー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
background-color
1
12
1
1
18
1
transparent
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.card {
  background-color: #ffffff;
}
.highlight {
  background-color: rgba(255, 235, 59, 0.3);
}

ライブデモ

soridcol-

CSS soridcol- demo.

プレビュー全画面表示

semi-transparentbackground

CSS semi-transparentbackground demo.

プレビュー全画面表示

Hover state

CSS hover in change demo.

プレビュー全画面表示

実務での使いどころ

  • カード・セクションの背景色設定

    コンテンツ領域やカードコンポーネントに背景色を設定し、視覚的な階層構造を作成できます。

注意点

  • 背景色が透明な場合、親要素や body の背景色が透けて見えます。意図しない表示にならないよう、必要に応じて明示的に背景色を指定してください。

アクセシビリティ

  • 背景色とテキスト色のコントラスト比がWCAG基準（通常テキスト4.5:1、大きなテキスト3:1）を満たすことを確認してください。

参考リンク