背景が透けると文字も透ける

質問

初心者ですが、本やネットをみながらHPを作成しています。

そこで、背景画像の上に文字を入れると読みにくいので
画像を透けさせようとテーブルを作成したのですが
同時に文字も透けてしまい、読みにくさは変わりません。

どうすれば良いでしょうか？

タグは以下の通りです。

<table align="center" style="background-color:#c0c0c0; filter:Alpha(opacity=50);" height="600" width="400">
<tr><td>
<font size="-1" color="#000000">文字文字文字
</font>
</td></tr>
</table>

回答No.7

rusya · ベストアンサー

<table>タグでなく、<div>タグでの使用例ですが・・・
まず<div>でひとつ枠を作って、その<div>に適当なクラス名（半角英数字）をつけ、下記のスタイルを指定します。
ここではクラス名を「waku」とするので、<div class="waku">ですね。

.waku{
filter:alpha(style=0,opacity=40);
-moz-opacity:0.4;
background-color: #ffffff;
}

背景色はここでは白になってますが、分かりやすい色に変えてください。

次に、<div class="waku">～</div>の中に、もう一つ<div>～</div>を作り、別のクラス名をつけます。ここでは「nakami」とするので<div class="nakami">です。
その<div class="nakami">に以下のスタイルを適用し、実際に<div class="nakami">～</div>の間に適当な文字を入れます。

.nakami{
position: relative;
}

これで背景だけが透けるはずです。
私も同じことで悩んでいて、試行錯誤の末にコレになりました。

お礼

お返事ありがとうございます。
「スタイルを指定する」＝「styleのタグで囲む」ということに気づくまで今までかかってしまいました(>_<)
そしていろいろ試した結果、なんとなくですが、使い方がわかってきましたので、もうちょっと勉強してみます。

回答No.9

MAN_MA_RUI

> 言われてみれば私の友人は「ポリシーでネスケを使っている」と言っていましたので、
あぁ、Netscape 7はサポートしなくてもいいと思います。
バグが多いのでサポートが難しいばかりか、セキュリティ的にも使用は望ましくないとされています。
Netscapeの実質的な後継の位置付けとなっているFirefoxのバージョン1.5ないし2.0あたりで表示できれば十分だと思います。
Netscape 8あたりならばサポートして良いかもしれませんけどね。

お礼

「Firefox」、名前だけは聞いたことがあります。「Netscape」でもバージョンでいろいろあるんですね。再度のご忠告、助かります。ありがとうございました。

回答No.8

MAN_MA_RUI

http://w2.abcoroti.com/~cattin/Alpha_ch.html
↑とあるサイトにある都合のいい例。

IEのオプションを操作する必要がある（？）ようですけど、多くの環境で半透明の表現が可能になります。

お礼

お返事ありがとうございます。
ソースを確認しましたが、わかるのは「bannarがたくさんあるなあ」ということぐらいでした。でも、一生懸命勉強すれば、いつかきっとわかるときがくるはず…！と信じて頑張ります。

回答No.6

ICHI-yan

２つ提案です。
１つ目
filter: glow(color=#ffffff, strength=3);
ffffffが色の指定（白）、3が幅の指定
これで、背景ではなく文字にフィルターをつけれます。
映画の字幕で背景の色と字幕が同じになったときに、影をつけるようなものです。これも、所詮、フィルターですので、IEにしか効かない事は同じですが、他の方法までのつなぎにどうぞ

２つ目
テーブルの背景に透過gifのバックをあてる。素材ってほどのものでないので、簡単に自作できます。１ピクセルごとに白、黒、白、黒という絵を作って片一方を透過させるだけ。これで、50％フィルターの出来上がりです。白黒でなくて、rako11さんの都合のいい色で作るといいです。どこかで素材として見たことあるのですが、失念してしまいました。わからなかったら、透過gifの作り方を調べるか質問してください。macかwinかは絶対に書いてくださいね。

お礼

お返事ありがとうございます。
１つ目の方法ですが、やってみたんですが上手くいきませんでした。サイト画面に変化がないんです。多分、私が何かを見落としているのだと思うので、もう少しあれこれ試してみます。
２つ目の方法は、ちょっと難しそうですが、1つ目の方法を試すことができたら次に挑戦してみます。

回答No.5

MAN_MA_RUI

あぁ…まぁ、No.1の私の発言は分かりにくくて当然なんだ^^;
その場の勢い任せで書いたからよく見ると１文なんですよ？
ぐだぐだになってます。

えーっと、まずfilterについて。これはInternet Explorerというブラウザが独自に実装しているCSSで、他のWebブラウザは対応していません。
そのためFilterを使うとInternet Explorer以外のWebブラウザでは正しく表示されなくなります。
好みの問題でIEを使わない人やIEが利用できない環境の人もいますので、たくさんの人にサイトを見てもらいたいといった場合には不向きです。

PNGのアルファチャンネルって言うのは画像そのものを半透明にする代物です。
アルファチャンネルというものに対応したグラフィックソフトが必要となりますが、全体を均一に半透明にするというのはそれほど難しくもありません。

しかしこれはInternet Explorerのバージョン6以前がサポートしていません。
背景が半透明の状態にならずベタ塗り状態になってしまいます。

この問題を解決するための方法がCSSのfilterのひとつ、AlphaImageLoaderの使用です。
これを使えばIE5.5-6の環境でも画像を半透明の状態にして表示することが可能となります。

CSSのfilterを使うなと言う先述の内容と矛盾するように感じるかもしれませんが、
IEとそれ以外の表示を同じようにするために使うのであればなんら問題はありません。
Internet Explorerだけに特殊効果を施すことが問題なのです。

お礼

再びのお返事ありがとうございます。
とってもよく理解できました。IE以外のことはあまり…というか、全然考えていませんでした。でも、言われてみれば私の友人は「ポリシーでネスケを使っている」と言っていましたので、危うく友人にすら見てもらえないサイトを作ってしまうところでした。ご忠告感謝します。

回答No.4

goulan

こんにちわ。
ご質問の答えに対しては、Ans. No.1,2さんと同じことになります。

どの程度の初心者か解らないのですが、Ans.No.1さんのお答えを理解出来ないようでしたら、filterを使うのは止めた方が良いと思います。

余計なお世話ですが・・・その htmlの Doctype（文書型宣言）はなんでしょう？ html4.0,4.01,xhtml1 では、table の align属性は非推奨、font要素も非推奨です。IE限定のfilterをどうにかするよりも、要素を先に覚えた方がよろしいかと。

お礼

お返事ありがとうございます。
NO１さんのお答えは理解できないので、filterは諦めたほうが良いんでしょうね。もっと簡単な方法を考えてみます。
それから（お恥ずかしいですが）「文書型宣言」のこともわかりません。「初心者でもできるホームページ」という本についていたCDで、ボタンをクリックするとタグがでてきたのを使って、下にも書きましたが素材サイトさんのタグをそこにひっつけただけなんです。
とりあえず、先に「要素」ですね。もうちょっと勉強してから出直します。ありがとうございました。

回答No.3

ANASTASIAK

背景画像そのものをやめることですね。
私は目に悪いので背景に文字が溶け込んでいるようなページは
直ぐ閉じてしまいます。しょせん自己満足です。

お礼

お返事ありがとうございます。
自己満足と言われれば耳が痛いです。もう、所詮、サイトを作るという行為自体が自己満足なので…（世間に役立つようなサイトではなく、趣味のサイトですから）
なるべく見やすい画面を心がけます。

回答No.2

venzou

背景画像を加工するのが基本だとは思いますが・・・

IE限定で、filter使うなら、Glowで文字を浮かび上がらせてはいかがでしょうか？
<b>も入れた方が読みやすいかな。

<table align="center" style="background-color:#000000; " height="600" width="400">
<tr><td style="filter: Glow(color=#FFFFFF);">
<font size="-1" color="#000000"><b>文字文字文字</b></font>
</td></tr>
</table>

お礼

お返事をありがとうございます。
おっしゃってる意味はなんとなくですがわかります。
背景は素材サイトからの拝借ですが、加工禁止とあり、「文字を重ねたい場合はこのタグを使ってね」とあったのでそのままコピーしたんですが、どうにも読みにくくてなにか方法があるのかなあ、と思い質問させていただきました。
もちょっと勉強していろいろ試してみます。ありがとうございました。

回答No.1

MAN_MA_RUI

文字だけを半透過にすることは無理だし、filterはIEしかつかえないし、どうしても半透過にしたいならアルファチャンネルを使ったPNGを背景にしてIE5.5と6はAlphaImageLoader使用、Firefoxとかは直接表示と言う方法をとることである程度互換性を持たせつつも背景だけ半透過という表現が可能になります。

お礼

お返事をありがとうございます。
ですが、回答の意味がさっぱりわからないほどの初心者です。
もちょっと勉強して出直してきます。すみませんでした。