• ベストアンサー

bodyタグで指定した背景の半透明化

HTMLファイルのbodyタグで指定した背景を半透明にしたいのですが、どうすればよいのでしょうか。 imgタグならばstyleでfilterのalpha()を使えばいい、という事はわかるのですが bodyタグで同じ事をすると、bodyタグ内の文字まで半透明になってしまいます。 よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • goldfox
  • ベストアンサー率49% (123/249)
回答No.1

＞bodyタグ内の文字まで半透明になってしまいます。 bodyに指定＝body要素（<body>～</body>の中身）に反映 ですから、まあ当然と言えば当然で。 ・半透明に「加工」した画像を背景に使用する ・filterをかけたimgを背景に見せかける ・背景を設定してfilterをかけたブロックと、文章を入れたブロックを重ねる など。 filterはIEとOperaくらいしか反映されないはずなので、加工した画像を使うのがいいかと思います。

AXRRXA
質問者

お礼

やはりこのままでは無理ですか…。 結局、教えていただいた２つ目の方法を採用しました。 ちなみに、IEとOpera以外でも反映させる方法はあるみたいです。 http://weblibrary.s224.xrea.com/weblog/css/cat15/iefirefoxoperanetscapesafarics.html 何はともあれ、ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • styleタグとbodyタグの関係について分かりません・・・

    スタイルシートの中にbodyを入れた場合、</html>の前に</body>は必要でしょうか？それとも不要でしょうか？ 下記のタグはマウスオーバーで画像の濃さを変えるようにしたかったため、サイトより転用しました。 スタイルの中にbodyタグを入れる意味はどういった利便性がありますか？ <style type="text/css"> <!-- body { margin-left: 2em; margin-right: 2em; style: overflow-x:hidden; color: black; background: #FFFFFF; } a:link { color: blue; } a:visited { color: purple; } h1 { font: bold 1.5em Verdana; } a img { filter: Alpha(Opacity=100); -moz-opacity: 1.5; border-style: none; } a:hover img { filter: Alpha(Opacity=50); -moz-opacity: 0.5; } --> </style> ご存知の方教えてください！

    • ベストアンサー
    • HTML
  • 背景を透過するタグについて

    こんばんわ。タイトル通り【背景を透過するタグについて】質問があります。よろしくお願いいたします。 <style type="text/css"> <!-- .box1{/*テキストスペース*/ … … width : 157px; background-color : #ffffff; filter : chroma(color=#ffffff); } </style> と、スタイルシートで色々と指定しております。 このテキストスペースの背後に画像があるので、背景を透かせたく、【chroma】を使って指定した色（白）を透かせましたが、 これだとまったく透明になってしまうので…できれば <table style="filter:Alpha(opacity=20)"> のように、透過の度合いを指定できるようになりませんでしょうか？ ↑テーブルでの透過の仕方しか分からず、上のテキストスペースで同じようなことをしたいのですが…。可能でしょうか？ お手数ですが、宜しければ教えていただけるととても助かります。 お願いいたします。

    • ベストアンサー
    • HTML
  • ２つのタグを合わせる

    <img src="画像ＵＲＬ" style="filter:Alpha(Style=2)"> このタグは普通の画像を丸の形に変化させるタグなんですが、このタグを 背景を左下に固定させるスタイルシート <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position:0% 100%; background-repeat: no-repeat ; } --> </STYLE> この２つのタグを合わせたいのですがそんなことが出来ますか？ ［つまり、固定する画像に変化をつけたいんです］ 意味不な質問でごめんなさい。 分かる方、ご回答願います。

  • 背景の過

    <body> <div class="alpha"> <p>透けたく無い文字</p> </div> </body> div.alphaに対してfilterで透過させ、 bodyの背景色が透けて見えるようにしました。 しかし残念なことに内側の 「透けたく無い文字」がどうにも透けてしまいます。 「透けたく無い文字」をどうしたら透けないようにできますか？

    • 締切済み
    • CSS
  • FC2ブログの記事の背景色について

    私は趣味で、最近ブログを開きました。 ブログを飾るテンプレートをオリジナルで作りたいと思って 今HTMLを一生懸命理解しようと努力しています。 困っているのは、ブログの記事の背景色を ブログそのものの背景が透けて見えるように半透明にしたいのですが、 メインブロックの設定のところに 　filter: alpha(style=0, opacity=70); と入れたところ、なんだか文字まで半透明になってしまう事です。 背景色のみ半透明にする方法をご存じの方 いらっしゃいましたら教えてください…

  • 半透明のテーブル

    <html> <head> <title>半透明テーブル</title> </head> <body> <table bgcolor="blue" style="filter:alpha(opacity=50)"> <tr><td> たとえばこういうテーブルを作ったとすると、<br> この文字も半透明になってしまう。<br> </td></tr> </table> </body> </html> IEのフィルタを使って半透明にしたいのですが、たとえば上のようにタグを書くと、テーブル内に書いたテキスト部分にもfilterが適用されてしまい、半透明になってしまいます。 何とかしてテーブルの部分だけを半透明にするいい方法はないですか？ 誰か知っていたら教えてください。お願いします。

  • マウスオーバー時に、半透明のフィルターをかけたい

    タイトルにフィルターという言葉を使っていますが、 filterを使う技ではないかもしれません。 背景に画像を設定しており、テキストにはfilter:dropshadowで 影を付けています。 また、<A HREF="">…</A>のリンクも付いています。 この状態で、テキストにマウスを乗せた時、 半透明のフィルムをかけたような感じにしたいのです。 onmouseover="this.style.backgroundColor='色'; 　　this.style.filter='alpha(style=0,opacity=30)'; とやってみたのですが、背景色が半透明にならならず、 文字に付けた影も消えてしまいます。 また、CSSでもやってみたのですが A:hover { background-color : 色 ; filter : alpha(opacity=30); -moz-opacity : 0.30 ; opacity : 0.30 ;} やはり、半透明にはなってくれませんでした。 透明度はまったく無い、元の色のままです。 偶然にも半透明の背景になった時はあったのですが （タグは忘れました） 文字まで半透明になってしまいました。 しばらく色々試していたのですが、もし半透明になったとしても 変えたいのは背景色ではないという事に気づき、 また最初から考え直しでかなり参っています。 （自分が悪いんですが・・・） ●半透明の色フィルムを重ねたような感じにしたいです。 　当然、文字も文字の影も背景も、透けて見える状態。 ●文字の長さはそれぞれ異なります。 ●あくまでもマウスオーバー時にそのようになり、 　乗せる前、離した後は元通り、何も無い状態にしたいです。 CSSを使うのかJAVAを使わないとダメなのかもよく分からず、 説明も上手くできなくて申し訳ありません。 どうぞ宜しくお願いします。

  • 透過背景を解除するにはどうすればいいのでしょうか？

    透過背景を解除するにはどうすればいいのでしょうか？ filterとopacityを使って背景色を透過したdivがあります このdivの一部で透過を解除したいのですがどうすればいいのでしょうか？ コードは以下のようなイメージです ---------- ■ HTML <div class="sample1"> ・・・←ここは透過 <div class="sample2"> ・・・←ここは透過にしたくない </div> ・・・ </div> ■ CSS .sample1 { ・・・ opacity: 0.6; ←火狐他用 filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=60); ←IE用 } .sample2 { ここに記述する内容が知りたい } ---------- やってみてダメだった方法 ・opacity: 1 ・filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=100); ・filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=0,Style=0,Opacity=60); ・sample2に新しい背景色を指定する ・sample2に新しい背景画像を指定する ご存知の方いましたら、よろしくお願いします！

    • ベストアンサー
    • HTML
  • スタイルシートで背景画像を指定

    今までbodyタグで背景を指定していたのですが、スクロールバーや余白の設定で スタイルシートを使うことになったので、背景画像もスタイルシートで指定することにしましたが、何度やっても表示されません。 このように書いてみました。 <style type="text/css"> <!-- BODY { background-image:url(img/28.gif); } BODY { 余白の設定} BODY {スクロールバーの設定 } --> </STYLE> htmlと同じフォルダの中にある、imgフォルダの28.gifという画像です。 画像のパスは間違っていません。アップロードもしてあります。 スタイルシートの解説をしているサイトさんを見ても、 何が間違っているのかわかりませんでした。 なぜ背景が表示されないかわかる方いらっしゃいますか？ 余白やスクロールバーはきちんと表示されているのですが・・・

    • ベストアンサー
    • CSS
  • Ａｌｐｈａフィルタについて

    　こんにちは。質問させてください。 現在、alphaフィルタを使って、画像の背景を半透明にしたいと思っているのですが、どうしてもできません。 （確認はie6.0でも5.5でも行っています） ソースはタグ辞典を見ながら、下のようなものを組みました。 どこか間違っているでしょうか？ お教え頂ければうれしいです。 よろしくお願い致します！ <html> <head> <meta http-equiv="Content-STYLE-Type" content="text/css; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .alpha1{ filter:progid:DXImageTransform.Microsoft.alpha(style=2,opacity=100, finishopacity=40); } .alpha2{ filter:progid:DXImageTranceform.Microsoft.alpha(style=2,opacity=100, finishopacity=0); } --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <img src="/jsg41044.jpg" width="700" height="466" class="alpha2"> </body> </html>

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する