Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 背景が透けて見えるタイトルを作成する

IE5.0以降のみ(Macintosh版IE5.0では表示されない場合があります)

「mask」フィルタを利用すると、文字を透明にすることができます。ここでは、「mask」フィルタを利用して文字列を透明に設定し、背景画像が透けて見えるように表示させる方法を考えてみましょう。

■ 文字列と「mask」フィルタの設定

 文字とフィルタの設定を行います。

<DIV id="Layer2" STYLE="position:absolute; width:335px; height:80px; font-size:80px; font-family:Times New Roman; font-weight:bold; filter:mask(Color=#ffffff); left: 280px; top: 255px; z-index: 2;">
<DIV ALIGN="center">Shirley's room</DIV>
</DIV>
<div id="Layer1" style="position:absolute; left:131px; top:185px; width:612px; height:312px; z-index:1; background-image: url(../../assets/images/maplevar.jpg); layer-background-image: url(../../assets/images/maplevar.jpg); border: 1px none #000000;">
</div>

文字の表示領域の幅(width)を指定しないと、文字列に影をつけることができないので注意が必要です。
「mask」フィルタでは、透明な範囲を不透明に、不透明な範囲を透明に表示することができます。この特徴をスタイルシートに設定した文字列に適用すると、文字範囲は透明になり、透明に設定されていた文字背景に色がつくため、四角い枠から文字をくりぬいたように表示できます。このとき、文字背景には「mask」フィルタで指定した色が設定されるので、枠を塗りつぶしたい色を指定することがポイントです。なお、文字列を表示枠内の中央に配置するように設定しておくと、枠組み内にバランスよく表示されます。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box