人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: nyankochan
●カテゴリ:ウェブ制作
✍キーワード:Alpha IE おぼん コーヒーカップ サイト
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● pamu
●15ポイント

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

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

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

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

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

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

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

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

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

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

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

◎質問者からの返答

いい感じですね。

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

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

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

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

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

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

現状です。


2 ● くいっぱ
●5ポイント

http://www.hagurachaya.com/

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

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

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

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

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

◎質問者からの返答

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

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

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

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

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

花柄は背景です。

その上に半透明白背景。

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

です。

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

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


3 ● Mars
●15ポイント

テーブルのセルに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>

◎質問者からの返答

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

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

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

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


4 ● takechan
●5ポイント

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

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

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

◎質問者からの返答

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

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


5 ● andymente
●50ポイント

http://nyuranger.shyper.com/hatena/alpha_ans/

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

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

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

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

◎質問者からの返答

ありがとうございます。

みごとにできました^^

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ