background-color

背景・装飾

要素の背景色を指定するプロパティです。色名、16進数カラーコード、RGB、RGBA、HSLなど様々な色形式で指定可能です。透明度も指定でき、デザインの基礎となる重要なプロパティです。

構文

Syntax
background-color: <color> | transparent
🎮

インタラクティブデモ

コントロール

プレビュー

コンテンツ

生成されたCSS

.element { background-color: #3b82f6; }

コード例

例 1

background-color: #f8fafc;
実行結果

薄いグレーの背景色を設定

例 2

background-color: rgba(59, 130, 246, 0.1);
実行結果

透明度10%の青い背景色

💡 TIPS

透明度を使うことで、重なった要素との調和を図れる。

関連プロパティ

ブラウザサポート

全ブラウザ対応