テーブルに背景画像&フィルター加工

テーブルにフィルター処理&背景画像入れ

テーブルに背景画像（壁紙）を入れフィルター加工すると言う少し高度な小技です。

1,普通のテーブル枠は非表示です。

意味わからない人テーブル１に戻る

ここに文字

2,左の物のセルに背景画像を入れたテーブル。

画像の大きさに合わせて幅と高さを変えてあります
こちらはリピートさせないタグはついていませんので見本のような画像の場合画像とテーブルの大きさを合わせる必要があります

ここに文字

１のソース

<TABLE height="200" width="200" bgcolor="#0099cc"><TBODY><TR>
<TD align="center">
<CENTER><FONT color="#ff0033">ここに文字</FONT></CENTER>
</TD>
</TR></TBODY></TABLE>

<FONT color="#ff0033">というのが文字色です
好きに変えてください。

2のソース

<TABLE height="190" width="210" bgcolor="#0099cc"><TBODY><TR>
<TD background="http://plaza.rakuten.co.jp/img/user/96/59/3359659/104.jpg">
<CENTER><FONT color="#ff0033">ここに文字</FONT></CENTER>
</TD>
</TR></TBODY></TABLE>

<FONT color="#ff0033">というのが文字色です

3,テーブルにFILTER: ALPHA(STYLE=3)

わからない人フィルターで透過処理へ

ここに文字

4,テーブルにFILTER: ALPHA(STYLE=3)に背景画像

こちらは画像をリピートさせないタグが入っています。
壁紙で良く使うようなこまかい画像は不向きです。

ここに文字

3のHTMLソース
<TABLE style="FILTER: ALPHA(STYLE=3); color=#ff0033" height="200" width="200" bgcolor="#0099cc"><TBODY><TR><TD>
<CENTER>ここに文字</CENTER>
</TD></TR></TBODY></TABLE>

color=#ff0033というのが文字色です
styleがよくわからない人はこちら

4のHTMLソース
<TABLE style="FILTER: ALPHA(STYLE=3); color: #ff0033; width: 210; height: 190; background: url(http://plaza.rakuten.co.jp/img/user/96/59/3359659/104.jpg) no-repeat center" bgcolor="#0099cc">
<TBODY>
<TR>
<TD>
<CENTER>ここに文字</CENTER>
</TD>
</TR>
</TBODY>
</TABLE>

5,テーブルにFILTER: ALPHA(STYLE=2)

わからない人フィルターで透過処理へ

ここに文字

6,テーブルにFILTER: ALPHA(STYLE=2)に背景画像

ここに文字

5のHTMLソース
<TABLE style="FILTER: ALPHA(STYLE=2); color=#ff0033" height="200" width="200" bgcolor="#0099cc">
<TBODY>
<TR>
<TD>
<CENTER>ここに文字</CENTER>
</TD>
</TR>
</TBODY>
</TABLE>

6のHTMLソース
<TABLE style="FILTER: ALPHA(STYLE=2); color: #ff0033; width: 210; height: 190; background: url(http://plaza.rakuten.co.jp/img/user/96/59/3359659/104.jpg) no-repeat center" bgcolor="#0099cc">
<TBODY>
<TR>
<TD>
<CENTER>ここに文字</CENTER>
</TD>
</TR>
</TBODY>
</TABLE>

7,テーブルにfilter:Alpha(opacity=50) 50を変えることで透過率が変わります。

わからない人フィルターで透過処理へ

ここに文字

8,filter:Alpha(opacity=50) に背景画像

ここに文字

<TABLE style="filter:Alpha(opacity=50); color=#ff0033" height="200" width="200" bgcolor="#0099cc">
<TBODY>
<TR>
<TD>
<CENTER>ここに文字</CENTER>
</TD>
</TR>
</TBODY>
</TABLE>

<TABLE style="filter:Alpha(opacity=50); color: #ff0033; width: 210; height: 190; background: url(http://plaza.rakuten.co.jp/img/user/96/59/3359659/104.jpg) no-repeat center" bgcolor="#0099cc">
<TBODY>
<TR>
<TD>
<CENTER>ここに文字</CENTER>
</TD>
</TR>
</TBODY>
</TABLE>