エフェクト

opacity

opacity は要素全体の不透明度を指定します。0 で完全に透明、1 でそのままです。子要素も含めて、まとめて透けます。

構文

<opacity-value>

<opacity-value> = <number> | <percentage>

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  opacity: 0.6;
}

opacity0.6

0〜1 の数値か、0%〜100% のパーセントで書きます。範囲の外の値はエラーにはならず、0 か 1 に丸められます。初期値は 1 です。

opacity は要素を描いたあとの全体を透かします。子に opacity: 1 を指定しても、親より濃くは戻せません。背景だけを透かしたいときは、background-color: #ffffff80 のように色のほうに透明度を持たせます。

1 未満にすると、その要素が重なり順の新しいまとまり（スタッキングコンテキスト）になります。z-index の効き方が変わることがあります。
opacity: 0 で見えなくなっても、場所はとったままで、クリックやフォーカスも受け付けます。操作もさせたくないときは visibility: hidden や display: none を使います。