透過させるためのプロパティopacityとbackground:rgba()
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()…色をつけた背景のみ透過させる時に使用。
という感じで使い分けをするようにしていました。