# opacity

> 要素の透明度を指定するプロパティです。0（完全透明）から1（完全不透明）の間で指定します。子要素も含めて透明度が適用されるため、背景だけを透明にしたい場合はRGBAを使用します。

- カテゴリ: アニメーション・エフェクト
- URL: https://www.css-dictionary.com/property/opacity/

## 構文

```css
opacity: <number>
```

## Tailwindでは

- `opacity-50` → opacity: 0.5
- `opacity-0` → opacity: 0
- 一般形: `opacity-{n}（0〜100）`
- 任意値: `opacity-[0.85]`
- 補足: 色だけ半透明にするなら bg-red-500/50 のような透明度修飾の方が適切。

## ブラウザ対応

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

## コード例

### 例1: 完全に不透明（デフォルト）

```css
opacity: 1;
```

### 例2: 半透明（背景が透けて見える）

```css
opacity: 0.5;
```

### 例3: ほぼ透明（うっすらと見える）

```css
opacity: 0.1;
```

## TIPS

display: noneと違い、要素の領域は確保される。アニメーションにも対応。

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

opacityは子要素も道連れに透過します。「背景だけ半透明にしたい」ならopacityではなく背景色のアルファ値（rgba/色 + 透明度）が正解で、この取り違えはAIにも頻発します。またopacityが1未満の要素は新しいスタッキングコンテキストを作るため、z-indexの挙動が変わる副作用があります。

## AIへの依頼文例

- 「テキストはくっきり、背景だけ半透明」のカードを、opacityを使わずに実装して
- opacityを付けたら重なり順がおかしくなった。スタッキングコンテキストの観点で調査して

## 関連プロパティ

- [visibility](https://www.css-dictionary.com/property/visibility.md)
- [display](https://www.css-dictionary.com/property/display.md)