transparent (6)

割と前から使われているテクニックなのですが、備忘録も兼ねてメモ。

今回作りたいもの

  • 黒い背景色+背景画像の上で、画面の中央に白いボックスを配置したい。
  • 中央のボックスは半透明にしたい。
  • 半透明にするのは背景だけでいい。

まずは中央にボックスを作る

参考:CSS で画面中央表示のサンプル | [ VERSION510 ]

こちら(↑)が一番あっさりして有用かつわかりやすいかと。
今回作りたいものに合わせ、サンプルソースに少し手を加えます。

CSS

HTML

HTML は内部に div を追加して、margin を設定しています。
ちなみに上下にくっつけたい場合は height を 100% にして top を 0 にしてネガティブマージンなどの調整を行えばOK。

ボックスの背景のみを透明にする

IE に対応する必要がなければ background-color:RGBa; のみで良いですが、IE 独自の機能である DirectX Filter の filter: progid:DXImageTransform.Microsoft.Gradient を使ってやることで対応できます。それほど難しくはないですが、aRGBとなってるところがポイント。

ということで #wrapper が下記のようになります。

Gradient フィルタは IE5.5 から有効になっているようなので安心ですね。

GradientType=[0/1]
0は縦に、1は横に変化するグラデーション。今回はどちらでも良いです。
StartColorStr=#aaRRGGBB
グラデーション開始の透明度と色を16進数で指定します。
EndColorStr=#aaRRGGBB
グラデーション終了の透明度と色を16進数で指定します。

#aa は透明度で、00(透明)〜FF(不透明)を指定します。残りの RRGGBB は色で、こちらはいつもの16進数表記。background-color の RGBa は透明度が後ろに来て、10進数表記なので、0〜255 と 0(透明)〜1(不透明) ですね。

StartColorStr と EndColorStr を同じにすることで、単一色の半透明化が実現できます。
これで画面中央に配置したボックスが半透明になりました!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA