HTML(タグ)の基礎のブログ版です。ホームページを作成するためのタグなどについてのFAQを主に解説しています。徐々に足していきます。
主に頂いたお便りからの回答を元に作成していますが、もしかすると私が誤った回答をしているばあいもありますので、気づかれた方はお知らせいただけますと助かります。
SELECTED ENTRIES
ここから下はこのFAQブログ内ではなく、自サイトのHTMLの基礎のほうへリンクしています。FAQではなく要素などの意味や使い方を調べたい、と言う方は以下からリファレンスの方へ飛ぶ事ができます。
HTMLの基礎:目的別
HTMLの基礎:タグ別
※下記のものは主なタグだけです。他にも掲載しています。
サイト概要
<< 新ウィンドウを開く際のオプションの指定 |main | リンクの下線を消したい >>

画像を半透明にする

「よく他のサイトで背景が透けて見えるところがあるのですが、 どうやってやっているのですか。」という質問です。 以前メールマガジンの方でも書いたのですが、それはスタイルシートのフィルタ という機能を使用します。

【フィルタとは?】
フィルタとは、IEが独自に拡張した機能のことで、フィルタを使用する ことにより、様々な効果を画像テキストなどに設定する事ができます。 ただ、ブラウザなどによっては意図したとおりに表示できなかったり、プ ロパティの属性の設定方法なども異なったりするので、注意が必要です。

以下のHTMLファイル記述例をご覧下さい。
※ 実際はタグの途中で改行を入れないで下さい


<html>
<head>
<style type="text/css">
<!--
.haikei {
width:480px;
filter:Alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,
finishx=300,finishy=300,enabled=true)
}
-->
</style>
</head>

<body>
<div class="haikei" style="width:480px">
<img src="画像の名前" border="0" width="480" height="640">
</div>
</body>
</html>

filter:Alpha(値を記述)

このスタイルシートを設定し属性や値を記述する事により、 画像を半透明にしたり、他にも色々な効果をつける事ができます。 Alpha(xxx) の、xxx 部分にフィルタの効果を調節する様々な属性を 指定します。それぞれの属性は「,(カンマ)」で区切って下さい。 Alphaの属性を以下にあげています。


 ▼opacity  スタート地点の不透明度(0〜100)
 ▼finishopacity  終了地点の不透明度(0〜100)
 ▼style   フィルタの種類(0〜3)
   1 扇状に半透明処理
   2 放射線状に半透明処理
   3 長方形に半透明処理

 ▼startx  スタート地点のX座標
 ▼starty  スタート地点のY座標
 ▼finishx  終了地点のX座標
 ▼finishy  終了地点のY座標
 ▼enabled  フィルタを実行するかどうか(true、false、又は1、0) 

上記のスタイルシートの属性や指定・使用方法 などについては、以下にも掲載していますので興味があればご参照下さい。 (フィルタはスタイルシートの使い方がわからなければ 少しややこしいかもしれません。)

全部丸ごとスタイルシート:半透明のフィルタをかける

但し、これはIEの機能なので、閲覧するブラウザによっては 希望通りの表示にならない事があるのでご注意下さい。

| 2006.04.03 Monday | ykr414 | FAQ【スタイルシート関連】 | - |
url: http://ykr414.ykr.main.jp/trackback/25