# background-color

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

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/background-color/

## 構文

```css
background-color: <color> | transparent
```

## Tailwindでは

- `bg-white` → background-color: #fff
- `bg-red-500` → background-color: パレットのred-500
- `bg-transparent` → background-color: transparent
- 一般形: `bg-{color}-{shade}（/nで透明度）`
- 任意値: `bg-[#fdfaf3]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 薄いグレーの背景色を設定

```css
background-color: #f8fafc;
```

### 例2: 透明度10%の青い背景色

```css
background-color: rgba(59, 130, 246, 0.1);
```

## TIPS

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

## AIがよく間違えるポイント

backgroundショートハンドは指定しなかった項目をすべて初期値にリセットします。AIがbackground: url(...)と別の場所のbackground-colorを混在させると、順序次第で色が消える事故が起きます。ショートハンドと個別プロパティの混在は方針を決めて統一するのが安全です。

## AIへの依頼文例

- backgroundショートハンドとbackground-colorの混在で背景色が消えるバグを調査して、書き方を統一して

## 関連プロパティ

- [color](https://www.css-dictionary.com/property/color.md)
- [background-image](https://www.css-dictionary.com/property/background-image.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)