opacity

アニメーション・エフェクト

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

構文

Syntax
opacity: <number>
🎮

インタラクティブデモ

コントロール

1
01

プレビュー

テキスト

生成されたCSS

.element { opacity: 1; }

コード例

1

opacity: 1;
実行結果
opacity: 1(完全に不透明)
背景が全く見えない

完全に不透明(デフォルト)

2

opacity: 0.5;
実行結果
opacity: 0.5(半透明)
背景が透けて見える

半透明(背景が透けて見える)

3

opacity: 0.1;
実行結果
opacity: 0.1(ほぼ透明)
背景がはっきり見える

ほぼ透明(うっすらと見える)

💡 TIPS

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

関連プロパティ

ブラウザサポート

IE9+, 全モダンブラウザ