HTML一覧CSS一覧CSS関数FlexboxシミュレーターCSS一覧

色

opacity 要素全体の不透明度を変える

重要度3 / 5

意味

要素と、その中身をまとめて薄くしたいときに使います。1 が不透明、0 が見えない状態です。文字だけ薄くするなら、色の方で透明度を指定する方が、背景や線まで薄くなりません。

opacity: 0 は見えなくても、クリックできることがあります。操作も止めたいときは、別の指定とセットで考えます。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML
<p class="note">この段落だけ、うすく表示します。</p>
CSS
.note {
  opacity: 0.45;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ対応
Chrome1〜
Firefox1〜
Safari2〜
Edge12〜
Chrome Android18〜
Safari iOS1〜

出典: MDN Web Docs(`@mdn/browser-compat-data`)