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

background-color

CSSの最も基本的なプロパティの一つで、要素に背景色を設定します。キーワード、HEX、RGB、HSLなど様々な色指定形式に対応しています。背景画像やグラデーションが読み込まれない場合のフォールバックとしても重要な役割を果たします。

背景カラー

概要

CSSの最も基本的なプロパティの一つで、要素に背景色を設定します。キーワード、HEX、RGB、HSLなど様々な色指定形式に対応しています。背景画像やグラデーションが読み込まれない場合のフォールバックとしても重要な役割を果たします。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク