<table>〜</table>のタグ内で背景を半透明化すると同時に
文字と画像を不透明にする方法を教えてください。
<td width=”*” class=”***”>で指定して「filter: Alpha(Opacity=50)」を使うと
背景画像と文字or画像両方が半透明化されてしまいます。
やりたいことを簡単に説明すると、
花柄テーブルクロスの上に半透明のおぼんを置いて
その上にコーヒーカップを置く感じです。
おぼんからは花柄テーブルクロスが透けますが、
コーヒーカップからは透けません。
やり方が載っているサイトでもＯＫです。
実際に試してみて上手くいった例を希望します。
使うブラウザはIEでお願いします。
No.1
181
0
15pt
http://kasetakao.fc2web.com/official.html
加瀬尊朗さん関連オフィシャルサイト
ブラウザの環境にある程度左右されない方法として、
私の場合、逆に非常にベタなやり方で同じ効果を狙ってページを作っています。
透明部分と白（画によっては背景画像のカラーと同系の薄い色が良いかと）の
市松模様GIFを作って、それをtable背景にしています。
nyankochanさんの場合、table（おぼん）の背景をそれにしてから
コーヒーカップを不透明（背景は透過）GIFで作ってみてはいかがでしょう。
見本URLは私のサイトコンテンツです。
table背景が市松模様GIF、入れ込んでいるバナーが不透明GIFです。
参考になりますでしょうか。
No.2
103013
5pt
たのしい紅茶ハーブティーの専門店はぐら茶屋
やりたいことが今一見えないんですが、掲題のサイトのような感じですか？
後ろの写真の色を変えると同時に半透明のメッセージウインドウを重ねて文字を表示しています。
まじめにスクリプトを書こうとしたら普通の人には難しいかもしれないですが、javascriptとスタイルシートをがつがつ組み合わせればできます。
文章で説明するよりコードを見られたほうが早いかと思います。このサイトのスクリプトは私が書いていますので、質問がありましたらどうぞ。
個別にレイヤー機能使えば部品毎に半透明とかは可能なんですが、
それだとちょっと困ることがありまして。
やりたいことはこんな感じです。
http://ec.uuhp.com/~nyanko/mihon.jpg
というよりこれそのものを表現したいんです。
花柄は背景です。
その上に半透明白背景。
さらにその上に文字やWhat’s Newの部分。
です。
What’s Newの画像は下側が半透明化グラデかかってます。
これを一つのテーブル内でやろうと思ってます。
No.3
20320
15pt
テーブルのセルにfilter: Alpha(Opacity=50)を使う限る、セル内に配置したものは全て透けてしまいますので、
1番の回答のように、フィルター以外の方法で半透明化させるか、テーブルの外に置いた画像をposition指定で重ねる等の工夫が要ると思います。
<body>
<div style=”position:relative;”>
<table background=”花柄テーブルクロス”>
<tr>
<td width=WWW height=HHH
background=”おぼん”
style=”filter: Alpha(Opacity=50)”>
</td></tr></table>
<img src=”コーヒーカップ” alt=”” width=”” height=””
style=”position:absolute;top:10px;left:10px;”>
</div>
やっぱりレイヤー機能にたよるしかないんですかね〜。
ちょっと強引だけど思い付きが合ったのでそれを試してみます。
で
引き続き情報募集してます。
No.4
80
5pt
http://www4.osk.3web.ne.jp/~kitayan/
タグ素材・HTMLタグであそぼう
以前僕もＨＰ作ったときにスタイルシートの参考にしたサイトですが、もうすでにご覧になったサイトかもしれませんが^^；見てみてください
やっぱり背景と同時に文字も半透明になってしまいますね。
z-index案はちょっとした更新であっちこっち変えなきゃいけないので失敗でした。
No.5
960
50pt
IE のフィルタは「幅・高さが明示されている」「テーブル内である」「絶対位置指定である」のどれかの条件が当てはまった場合にのみ適用されたはずです。
なので、親要素と本文の間に「幅・高さを明示しない」「相対位置指定と明示された」ブロック要素を置くことで親要素に適用されている効果を回避できます。
平たく言うと、コーヒーカップの下に見えないソーサーを置く感じです。
<div style="position:relative;width:auto;height:auto;"><p>コーヒーカップ</p></div>
ありがとうございます。
みごとにできました＾＾
くいっぱ
2004/10/07 11:06:34
42
39
andymente
2
1
1
いい感じですね。
ですが、コーヒーカップにあたる画像が、
一部グラデーション効果(徐々に半透明化)をつかっていて
そこから半透明化背景色にジョイントするので
ちょっと厳しかったです。
徐々に半透明する以前に画像全体もすでに
背景と一緒に半透明にされちゃってるのが
現状です。