どうも、僕です。
最近CSSの記事ばかり書いているので、そろそろWordpress系の記事とかSEOなどのマーケティング関係の記事を書かなければなーと思ってます。
※SEOとかWordpress関係の記事は上位表示が難しいので、書くのには気合がいるんですよね。
CSSで背景などを透明にするときにOpacityとかRGBaを使用すると思いますが、今回はそこの使い方と違いについて解説していきます。
対応ブラウザ
CSS3のプロパティなので主要ブラウザの最新版では動作します。
IE9より古いものはopacityをサポートしていないので、代わりにfilterのalpha(opacity=)を使用してください。
CSS filterの詳しい使い方はCSSでおしゃれに画像を加工！CSS FILTER 使用方法と例から
Opacity
不透明度を表すもので、指定できる値は0〜1の間です。※小数点以下「0.25」とかも指定可能。
デモ
.hoge{
background:#F50;
opacity:0.5;
}
ご覧の通り透明度が増してますよね。指定する値が0に近ければ近いほど透明になります。
ただここで問題なのは文字も一緒に透明度が下がってしまう点ですね。
ですので、hoverで背景だけを透明にしたいときとかは、次に説明するRGBaでの透明度を調整することをおすすめします。
RGBa
RGBカラーモデル（Red,Green,Blue）にalphaが加わった色指定際に使用できるものです。
デモ
.hoge2{
background:rgba(255,85,0,0.5);
}
alphaの指定できる値はopacityと同じ0〜1までの間で、前の3つの数字はそれぞれ赤、緑、青を表しています。
このRGBaで指定することによってbackgroundだけの透明度を操ることができるので非常に便利です。
OpacityとRGBaの違い
上記の説明でOpacityとRGBaの使い方を説明しましたが、違いは
Opacity = プロパティ
RGBa = 値
というところです。
プロパティと値の違いはわかりますよね？
color:#000;
のようなコードの場合、colorがプロパティ、#000が値になります。
OpacityとRGBaの使い分け
Opacity
・画像を透明にする場合
RGBa
・色を透明にする場合
background,colorなどの色を指定できるところにはRGBaが使用できるのでその色だけを透明にできます。
まとめ
今回はすこし短いですが、要素を透明にする際にどっちが適しているかがわかっていただければ嬉しいです。たまにrgbaだとあれこの色のコードなんだっけとなることがありますが、そこはどこかにメモってコメントアウトするなりしてください。※慣れると自分で大体の色を調節できるようになります。
では。
