11332363 ランダム
 ホーム | 日記 | プロフィール 【ログイン】

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

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

INDEX FILTER FONT TEBLE MARQUEE 日記 消す 無料 style その他

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

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

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楽天市場案内プロフィールLINKDIARYBBS

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

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


Copyright (c) 1997-2017 Rakuten, Inc. All Rights Reserved.