スタイルシートについての質問です。

<table>〜</table>のタグ内で背景を半透明化すると同時に
文字と画像を不透明にする方法を教えてください。
<td width=”*” class=”***”>で指定して「filter: Alpha(Opacity=50)」を使うと
背景画像と文字or画像両方が半透明化されてしまいます。

やりたいことを簡単に説明すると、
花柄テーブルクロスの上に半透明のおぼんを置いて
その上にコーヒーカップを置く感じです。
おぼんからは花柄テーブルクロスが透けますが、
コーヒーカップからは透けません。

やり方が載っているサイトでもOKです。
実際に試してみて上手くいった例を希望します。
使うブラウザはIEでお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/10/04 13:34:08
  • 終了:--

回答(5件)

id:pamu No.1

pamu回答回数181ベストアンサー獲得回数02004/10/04 13:45:49

ポイント15pt

http://kasetakao.fc2web.com/official.html

加瀬尊朗さん関連オフィシャルサイト

ブラウザの環境にある程度左右されない方法として、

私の場合、逆に非常にベタなやり方で同じ効果を狙ってページを作っています。

透明部分と白(画によっては背景画像のカラーと同系の薄い色が良いかと)の

市松模様GIFを作って、それをtable背景にしています。

nyankochanさんの場合、table(おぼん)の背景をそれにしてから

コーヒーカップを不透明(背景は透過)GIFで作ってみてはいかがでしょう。

見本URLは私のサイトコンテンツです。

table背景が市松模様GIF、入れ込んでいるバナーが不透明GIFです。

参考になりますでしょうか。

id:nyankochan

いい感じですね。

ですが、コーヒーカップにあたる画像が、

一部グラデーション効果(徐々に半透明化)をつかっていて

そこから半透明化背景色にジョイントするので

ちょっと厳しかったです。

徐々に半透明する以前に画像全体もすでに

背景と一緒に半透明にされちゃってるのが

現状です。

2004/10/04 14:09:10
id:kuippa No.2

くいっぱ回答回数1030ベストアンサー獲得回数132004/10/04 14:47:23

ポイント5pt

http://www.hagurachaya.com/

たのしい紅茶ハーブティーの専門店はぐら茶屋

やりたいことが今一見えないんですが、掲題のサイトのような感じですか?

後ろの写真の色を変えると同時に半透明のメッセージウインドウを重ねて文字を表示しています。

まじめにスクリプトを書こうとしたら普通の人には難しいかもしれないですが、javascriptとスタイルシートをがつがつ組み合わせればできます。

文章で説明するよりコードを見られたほうが早いかと思います。このサイトのスクリプトは私が書いていますので、質問がありましたらどうぞ。

id:nyankochan

個別にレイヤー機能使えば部品毎に半透明とかは可能なんですが、

それだとちょっと困ることがありまして。

やりたいことはこんな感じです。

http://ec.uuhp.com/~nyanko/mihon.jpg

というよりこれそのものを表現したいんです。

花柄は背景です。

その上に半透明白背景。

さらにその上に文字やWhat’s Newの部分。

です。

What’s Newの画像は下側が半透明化グラデかかってます。

これを一つのテーブル内でやろうと思ってます。

2004/10/04 15:34:44
id:Mars No.3

Mars回答回数203ベストアンサー獲得回数202004/10/04 15:45:20

ポイント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>

id:nyankochan

やっぱりレイヤー機能にたよるしかないんですかね〜。

ちょっと強引だけど思い付きが合ったのでそれを試してみます。

のアブソリュートにせずにz-indexで無理やり重ねる。

引き続き情報募集してます。

2004/10/04 15:58:28
id:takechan No.4

takechan回答回数8ベストアンサー獲得回数02004/10/05 09:47:19

ポイント5pt

http://www4.osk.3web.ne.jp/~kitayan/

タグ素材・HTMLタグであそぼう

以前僕もHP作ったときにスタイルシートの参考にしたサイトですが、もうすでにご覧になったサイトかもしれませんが^^;見てみてください

id:nyankochan

やっぱり背景と同時に文字も半透明になってしまいますね。

z-index案はちょっとした更新であっちこっち変えなきゃいけないので失敗でした。

2004/10/06 09:32:00
id:andymente No.5

andymente回答回数96ベストアンサー獲得回数02004/10/06 18:47:05

ポイント50pt

IE のフィルタは「幅・高さが明示されている」「テーブル内である」「絶対位置指定である」のどれかの条件が当てはまった場合にのみ適用されたはずです。

なので、親要素と本文の間に「幅・高さを明示しない」「相対位置指定と明示された」ブロック要素を置くことで親要素に適用されている効果を回避できます。

平たく言うと、コーヒーカップの下に見えないソーサーを置く感じです。

<div style="position:relative;width:auto;height:auto;"><p>コーヒーカップ</p></div>

id:nyankochan

ありがとうございます。

みごとにできました^^

2004/10/07 08:53:10
  • id:kuippa
    おぉスゲぇ

    じつは、コメントを貰ったあとレイヤーつかわないでやろうとして、
    書いてたのですが…、できなかった…
    _| ̄|○ li|

    なるほどアルファ属性にそんなエスケープ方法があったんですか
    andymenteさん見事です

    (。・ω・。)ゞ アンディーメンテ?
    あばたえくぼですか??
  • id:andymente
    Re:おぉスゲぇ

    >(。・ω・。)ゞ アンディーメンテ?
    >あばたえくぼですか??
    はい、アンディーメンテの一ファンです。(一ファンの割にはおこがましい ID ですが…)
    人力はてなでアンディーメンテを知ってる方に出会えて嬉し恥ずかし驚きです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません