2018.06.04

18. 要素を明るくしたり、暗くしたりする opacity・rgba

目次

opacityとrgbaの違い

opacityは指定した要素の子要素も含めてすべてが透明になり、rgbaは指定した要素のみが透明になるという違いがあります。

次の例では、div(id=”image”)で正方形の箱を作り、そこに背景画像を指定し、その中にpタグで文字を入れています。


この状態で、背景画像だけを透明にしたかったとします。
試しにdiv(id=”image”)に対してopacityを指定してみると、下のように文字までが透明になってしまいます。

このようにopacityには、指定した要素の子要素までも透明にする性質があります。

背景画像を透明に(明るく)する

では、背景画像だけを透明にするにはどうするかというと、背景画像を指定したdiv(id=”image”)の直下に新しい子要素を作り、それについてbackground-colorでrgbaを指定するという方法があります。

(補足)

rgbaとはr(red)・g(green)・b(blue)を要素とするrgbカラーモデルにa(alpha)を加えたもので、aは色の透明度を表します。

r・g・bは0から255までの値をとり、0にすればその色の要素がなくなり、255にすればその色の要素がフルになります。例えば、rを255にしてg・bを0にすれば赤になり、r・gを255にしてbを0にすれば黄色になります。

色の透明度を表すaの値は、opacityと同じように0から1の間で指定でき、1に近付くほど不透明に、0に近付くほど透明になります。つまり、「rgbの組み合わせで色を作り、aの値によって透明度の具合を調整している」といった感じです。

本題に戻り、下の画像ではdiv(id=”image”)の下に新しくdiv(id=”overlay”)を作り、そこに色が白で透明度0.6のbackground-colorを指定してみました。


このように、うまく背景画像だけが透明になってくれました。これは何が起こっているかというと、一番後ろにある女性の画像の前に透明な白のフィルターが1枚かかり、その前に文字が表示されているようなイメージです。

背景画像を暗くする

↓rgbaで指定するフィルターの色を黒にすると、また雰囲気が変わって見えますね!



home

scroll