大人の楽天生活 スローライフを楽しむ情報Blog楽天生活です

大人の楽天生活 スローライフを楽しむ情報Blog楽天生活です

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

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

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

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

意味わからない人 テーブル1に戻る
ここに文字

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

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

<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>


楽天生活 らくらくショッピングガイド らくらくコピペ 楽天サーフィン みゅうちゃん You Big 気ままな生活
アフィリエイトの始めかた 初めての方 楽天市場案内2 楽天市場案内 プロフィール LINK DIARY BBS

キャラコレ生活 | 麺めん生活
当サイトのどのページもリンクはフリーです
コピペ用HTMLソース、テンプレートの使用もすべてOKですが、
そのまま二次配布、加工しての二次配布はご容赦願います。

Copyright (C) 楽天生活 2003-2004 All Rights Reserved


© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: