| 背景色を透明にしてみる |
 |
|
これが元の画像です。 続いて、この上に画像を使わずに、透明色を重ねて見ます。 皆さん、驚く用意は宜しいですか？ |
|
はい！！
これですっ！！ |
|
さあ、どうでしたか？ 非常に簡単に使えますし、効果も絶大ですね。 しかし、これにも落とし穴があります。 そう、NetScapeでは使えません・・・致命的です。 ですから、使用する場合はネットスケープは排除！！的な決断が必要になります。 個人レベルだとそれも選択の一つだと思いますし、実際IEの方が圧倒的に多いので、構わないと思います。 しかし企業では使えないでしょうね・・・ （独り言）実は、このサイト内のホームページで一度だけ使ってますけどね。おっと、みんなには内緒ですよ。 それでは、長くなりましたがソースをチラッと見ていただきます。 |
| ソース |
<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>
|
■positionプロパティ
static：配置方法を指定しない（デフォルト） relative：通常表示される位置からの相対的な配置（現在使用している設定です。） absolute：親要素に対して絶対的に配置（ウィンドウの大きさに左右されます。） fixed：親要素に対して絶対的に配置（位置を固定し、スクロールしても移動しない） ■paddingプロパティ ボックスの端から文字の間隔
■top、rightプロパティ
上端からの位置（基準はrelativeだと本来の表示位置から、fixedとabsoluteは、ウィンドウからの上端からです。） ■height、widthプロパティ ボックスの幅と高さの指定 ■z-indexプロパティ ボックスの重なり順（0が一番下） |