背景を透明にしたい！ CSS3で透明度を利かせるやり方
二つの透明度
透明度はopacityとrgbaで指定できる。
じゃあどっちでも良いじゃん。
と、思うじゃん？
ところがどっこい効果が違います。
opactyの場合
例えばあるdivの背景を透明にしたい場合
opactyで指定すると文字も透明度が変わってしまいます
なので、divに指定するには向いてないかも。
opactyが便利なのはhoverの設定に使うときです。
グローバルナビボタンやサイドバナーなんかのボタンを画像で作った時に
hover用の画像を作らなくても画像が変化させられるので
楽だし、画像が少なくて済む分サイトが軽くなるメリットがあるようです。
opacityの書き方
.container {
opacity:0.7;
filter:alpha(opacity=30);/*for id 8 */
}
filter:alpha(opacity=30);/*for id 8 */ は
いんたーねっとえくすぷろーらー８以前はopacityが使えない為
その場合でも透明にする設定です。
またIEか。
rgbaの場合
rgbaで設定すると背景だけ透明になってくれます。べんり。
サイト自体の背景を画像にした時なんか、コンテンツに指定すれば薄く背景画像が見えるので
文字も見えやすいし画像も見える、印象的なサイトが作れます。
rgbaの書き方はこんな感じ
background: rgba(0, 21, 57, 0.4);
1が不透明、0が透明なので、（０.4）と小数点でや（５０％）とパーセントで表記することができます。
試してみた感じだとbackgroundだけでなくborderや文字の色を指定する時にrgbaにしても透明になるみたいです。
まとめ
背景など、特定の場所を透明にしたい場合はrgba
div全体の透明度を変えたい場合はopacityを使おう。
