初心者ですが、本やネットをみながら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.2
- 回答日時:
背景画像を加工するのが基本だとは思いますが・・・
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.4
- 回答日時:
こんにちわ。
ご質問の答えに対しては、Ans. No.1,2さんと同じことになります。
どの程度の初心者か解らないのですが、Ans.No.1さんのお答えを理解出来ないようでしたら、filterを使うのは止めた方が良いと思います。
余計なお世話ですが・・・その htmlの Doctype(文書型宣言)はなんでしょう? html4.0,4.01,xhtml1 では、table の align属性は非推奨、font要素も非推奨です。IE限定のfilterをどうにかするよりも、要素を先に覚えた方がよろしいかと。
お返事ありがとうございます。
NO1さんのお答えは理解できないので、filterは諦めたほうが良いんでしょうね。もっと簡単な方法を考えてみます。
それから(お恥ずかしいですが)「文書型宣言」のこともわかりません。「初心者でもできるホームページ」という本についていたCDで、ボタンをクリックするとタグがでてきたのを使って、下にも書きましたが素材サイトさんのタグをそこにひっつけただけなんです。
とりあえず、先に「要素」ですね。もうちょっと勉強してから出直します。ありがとうございました。
No.5
- 回答日時:
あぁ…まぁ、No.1の私の発言は分かりにくくて当然なんだ^^;
その場の勢い任せで書いたからよく見ると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.6
- 回答日時:
2つ提案です。
1つ目
filter: glow(color=#ffffff, strength=3);
ffffffが色の指定(白)、3が幅の指定
これで、背景ではなく文字にフィルターをつけれます。
映画の字幕で背景の色と字幕が同じになったときに、影をつけるようなものです。これも、所詮、フィルターですので、IEにしか効かない事は同じですが、他の方法までのつなぎにどうぞ
2つ目
テーブルの背景に透過gifのバックをあてる。素材ってほどのものでないので、簡単に自作できます。1ピクセルごとに白、黒、白、黒という絵を作って片一方を透過させるだけ。これで、50%フィルターの出来上がりです。白黒でなくて、rako11さんの都合のいい色で作るといいです。どこかで素材として見たことあるのですが、失念してしまいました。わからなかったら、透過gifの作り方を調べるか質問してください。macかwinかは絶対に書いてくださいね。
お返事ありがとうございます。
1つ目の方法ですが、やってみたんですが上手くいきませんでした。サイト画面に変化がないんです。多分、私が何かを見落としているのだと思うので、もう少しあれこれ試してみます。
2つ目の方法は、ちょっと難しそうですが、1つ目の方法を試すことができたら次に挑戦してみます。
No.7ベストアンサー
- 回答日時:
<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.8
- 回答日時:
↑とあるサイトにある都合のいい例。
IEのオプションを操作する必要がある(?)ようですけど、多くの環境で半透明の表現が可能になります。
お返事ありがとうございます。
ソースを確認しましたが、わかるのは「bannarがたくさんあるなあ」ということぐらいでした。でも、一生懸命勉強すれば、いつかきっとわかるときがくるはず…!と信じて頑張ります。
No.9
- 回答日時:
> 言われてみれば私の友人は「ポリシーでネスケを使っている」と言っていましたので、
あぁ、Netscape 7はサポートしなくてもいいと思います。
バグが多いのでサポートが難しいばかりか、セキュリティ的にも使用は望ましくないとされています。
Netscapeの実質的な後継の位置付けとなっているFirefoxのバージョン1.5ないし2.0あたりで表示できれば十分だと思います。
Netscape 8あたりならばサポートして良いかもしれませんけどね。
「Firefox」、名前だけは聞いたことがあります。「Netscape」でもバージョンでいろいろあるんですね。再度のご忠告、助かります。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
WEB上でディレクトリ内の画像を...
-
particles.jsの背景の上にテキ...
-
CSSでテキストのリストの・...
-
【至急お助け!】チェックボッ...
-
CSSのリスト 背景画像が表示さ...
-
IEで<div>の下の<img>がずれる
-
ホームページ背景の、透過率設...
-
インラインフレームでの背景画...
-
HTML・CSSコーディングが上手く...
-
ページごとに背景画像を変更し...
-
文字列の下に点線を出す
-
テーブルセルの背景画像のサイ...
-
背景画像をくりかえさないhtml
-
テキストの横にアイコンを並べたい
-
テキストのフェードインの方法
-
CSSで背景画像の比率保持、拡大...
-
見出しの複数行の対応について
-
ホームページの背景画像を画面...
-
CSSでの動画のマスク処理
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報