cssのopacityとbackground:rgba()は、ともに透過させるためのプロパティ。透過させるという用途は共通でも、使い方は異なっていると思います。
透過には常にopacityを使っていたとき、囲っていた範囲全体に透過及んでしまい、どのように対処しようかと悩んだことがあったので、そのときのメモです。

スポンサーリンク

opacityとbackground:rgba()の違い

まずはプロパティの中身から、

opacityは、

css

opacity: 1

上記のように記述をします。
このときの単位は、0.1刻みで0が最小、1が最大です。
0に近づくほど透明度が増します。

background:rgba()は、

css

background:rgba(0, 0, 0, 1)

上記のように記述をします。
r、g、b、aの各アルファベットは、

r:red
g:green
b:blue
a:alpha
になってます。

そして、各アルファベットと括弧内の各数値が対応しています。
このときの単位は、r、g、bは0が最小、255が最大です。255に近いほどその色が鮮やかになっていきます。
aは0に近づくほど透明度が増します。

自分が行っていた使い分けとしては、

opacity…画像単体など、周辺に影響を及ぼさない場所に使用。
background:rgba()…色をつけた背景のみ透過させる時に使用。

という感じで使い分けをするようにしていました。

PAGE TOP