-history back- B1k6yHP→touka/touka.htm HOMEへ

前へ (5)画像の透過その1 次へ

参照ホ−ムペ−ジ http://www002.upp.so-net.ne.jp/littledear/gazou6.htm
画像の透過についてインタ−ネットで検索したら上記のファイルを見つけました。ホ−ムペ−は停止されているようなので作者にこのプログラムを参照して修正した事を断っていません。・・でも透過を理解するのに便利なので助かります。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
HTMLの構成・基本の説明やHPに利用したいサンプル例が多く掲載されています。
尚、サンプル画像1は過去に入手し、サンプル画像3はミ−さんよりお借りしています。
サンプル画像1はHPBで作成している。円(輪郭と塗り潰し)のため円の輪郭が残る。サンプル画像2は角丸四角形(塗り潰し)で作成しているので輪郭は表示されない。
みなさんも、サンプル画像を自分で用意して「画像の透過」にチャレンジしてみてはと思いここに掲載しました。


元の画像 青を透過 赤を透過 黄を透過
サンプル画像1

円の輪郭が残っていた?
サンプル画像2

輪郭が残らないように「塗りつぶしのみ」にした。
サンプル画像3

サンプルがかわいいので借用した。
補足:デ−タソ−スの一部を抜粋しています。
<TITLE>画像の透過その1</TITLE>
<STYLE TYPE="text/css">
<!--
.touka1{filter:chroma(color=blue);}
.touka2{filter:chroma(color=red);}
.touka3{filter:chroma(color=yellow); }

-->
</STYLE>
</HEAD>
<BODY bgcolor="#ffffff">
<CENTER>
<TABLE border="1">

<TBODY>
<TR>
<TD width="104">サンプル画像2<BR>
<BR>
<TD width="104"><IMG src="image.gif"width="120" height="108" border="0"></TD>
<TD width="96"><IMG src="image.gif" width="120" height="108" border="0" class="touka1"></TD>
<TD width="98"><IMG src="image.gif" width="120" height="108" border="0" class="touka2"></TD>
<TD width="102"><IMG src="image.gif"width="120" height="108" border="0" class="touka3" ></TD>
</TR>
・・・・
</BODY>
注記:太字の箇所を正確に記述するとこのフィルタ−は動作します。

UP

inserted by FC2 system