色
opacity 要素全体の不透明度を変える
意味
要素と、その中身をまとめて薄くしたいときに使います。1 が不透明、0 が見えない状態です。文字だけ薄くするなら、色の方で透明度を指定する方が、背景や線まで薄くなりません。
opacity: 0 は見えなくても、クリックできることがあります。操作も止めたいときは、別の指定とセットで考えます。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<p class="note">この段落だけ、うすく表示します。</p>.note {
opacity: 0.45;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 1〜 |
| Firefox | 1〜 |
| Safari | 2〜 |
| Edge | 12〜 |
| Chrome Android | 18〜 |
| Safari iOS | 1〜 |
出典: MDN Web Docs(`@mdn/browser-compat-data`)