背景色を透明にしてみる

ソース

<STYLE TYPE="text/css">
<!--

DIV.sample01 {
  background-color:#4E3618;
  position:relative;
  top:-70px;
  right:-100px;
  height:30px;
  width:100px;
  filter:Alpha(opacity=50);
  color:#ffffff;
  padding:3px;}
}
-->
</STYLE>

ポイントはfilter:Alpha(opacity=**);です。
opacityの値を0～100で指定してやることによって、透明度が変わります。（100で不透明）
background-colorは、背景色です。

<STYLE>タグの入れ場所は、書くまでもありませんが、<HEAD>タグの中です。
実際に使用する場合は<BODY>の中で<DIV CLASS='sample01'>と使います。

注意
NetScapeでは、filter:Alphaに対応していません。

サンプル01

透明度
50％

■ワンポイントアドバイス
下の例では、<TABLE>の<TD>タグの中に画像とDIVを配置しています。
それから、positionプロパティをrelativeにしてDIVの位置を決めています。
これだと、どれだけウィンドウサイズが変わっても画像の大きさが変わらない限り、スタイルが崩れることはありません。
しかし、注意していただきたいのはDIVの本来の位置にサイズが残ってしまうらしい、という事です。（実際には表示されませんが・・・）
下のサンプルでは、ボックスを4つ配置していますが、4つのボックスのサイズがそのまま画像の下に残っています。

サンプル02

■positionプロパティ
  static：配置方法を指定しない（デフォルト）
  relative：通常表示される位置からの相対的な配置（現在使用している設定です。）
  absolute：親要素に対して絶対的に配置（ウィンドウの大きさに左右されます。）
  fixed：親要素に対して絶対的に配置（位置を固定し、スクロールしても移動しない）
■paddingプロパティ
  ボックスの端から文字の間隔

■top、rightプロパティ
上端からの位置（基準はrelativeだと本来の表示位置から、fixedとabsoluteは、ウィンドウからの上端からです。）

■height、widthプロパティ
ボックスの幅と高さの指定
■z-indexプロパティ
ボックスの重なり順（0が一番下）

写真：夢天文台　アストロ（豊平）

▲BACK

IT SOHO CLUB