- 締切済み
Firefox2で画像を透過すると文字も透過してしまう？
現在制作中のサイトで、 バナー画像に下記のようなスタイルを指定したところ、 クライアントより「Firefox2で見ると画像のみでなくページ全体の文字も透けて見える」と言われました。 #sample { filter:alpha(opacity=60); opacity:0.6; } 一般的によく使われているスタイルのようなので大丈夫だと思っていたんですが、 確認してみると確かにそのような現象になるようです。 同様の現象や解決法をご存じの方、いらっしゃいますでしょうか。 それともこれはブラウザのバグだとあきらめるしかないのでしょうか・・・。 ちなみに、下記ページの「キャンペーン＆スペシャルコンテンツ」の バナー部分に使用してあるものと同じです。 http://www.lorealparisjapan.jp/main.html 何かご存じの方いらっしゃいましたら、よろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
参照URLのコンテンツ中の”「キャンペーン＆スペシャルコンテンツ」のバナー部分”の”文字も透けて見える”というのは、例えば： ---------------------------------------------------------------------- （画像：マウスオーバーすると半透明に） リバイタリフト（見出し：マウスオーバーするとグレーに） 大好評のリバイタリフトから…（テキスト：最初からグレー） ---------------------------------------------------------------------- の箇所の事でしょうか？もしそうだとしたら、 > 上記サイトでも同様に文字が透けて見えます。全く同じ現象なので、原因も同じだと思うんですが・・・。Firefox3だと正常に動作しています。 とあるのですが、上記の部分の表示結果は、こちらの環境で見る限り、Firefox2であっても3であっても、IE6でも7でも全く同じに見えており、どこの「文字が透けて見え」るのか、わからないのですが…？ 提供された情報で、以下の様なサンプルを作って検証してみました。 ※質問者様の(X)HTMLのDOCTYPE等が不明ですので、とりあえず参照URLのロ○○ルのコンテンツと同じ（XML宣言無しのXHTML 1.0 Transitional／文字コードはUFT-8）にしておきました。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="css/sample.css" type="text/css" /> <title>サンプル</title> </head> <body> <div id="sample"> <h3><a href="/*****.html"><img src="images/aaa.jpg" width="100" height="100"></a></h3> <p><a href="***">コメントコメントコメント</a></p> <p>div#sample内のテキスト</p> </div> <p>div#sampleの外のテキスト</p> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { background: #fff; color: #000; font-size: 12px; } div#sample a:hover img { filter: alpha(opacity=60); opacity:0.6; -moz-opacity:0.6; } ---------------------------------------------------------------------- 上記での検証結果は、Firefox2/3、IE6/7を含む複数のモダン・ブラウザで全く同じでした。 つまり、画像のリンクをマウスオーバーした時も、div#sample内のテキスト（リンクあり／リンクなし）もdiv#sampleの外のテキストにも何ら変化は起きず、本来のカラーを保っている、という事です。 ※ちなみに、上記で検証する限りは"-moz-opacity:0.6;"の指定がなくてもFirefox2/3共に透過の効果が得られます。 もしかして、すごく単純な問題なのかも…？どこかでリンクが閉じ忘れていたりしていませんか？記述ミスがないか文法チェッカーにはかけてみましたでしょうか？ 検証条件が異なる様でしたら、補足して下さい。
CSSだけでは無くHTMLにどう適応させてるのかが不明。 提示しないと根本的な回答は得られないのでは？
- OKwebb
- ベストアンサー率44% (92/208)
> ちなみに、下記ページの「キャンペーン＆スペシャルコンテンツ」の > バナー部分に使用してあるものと同じです。 > http://www.lorealparisjapan.jp/main.html このサイトもページ全体の文字も透けて見えるのでしょうか？ （FireFox3ですがどこの部分かよくわからなくて・・・。） もしこのサイトで問題ないのであれば、これと同様に上位のタグでサイズ指定してあげればよいのではないでしょうか？
お礼
ご回答ありがとうございます。 上記サイトでも同様に文字が透けて見えます。 全く同じ現象なので、原因も同じだと思うんですが・・・。 Firefox3だと正常に動作しています。 あと、これも説明が足りなかった、というか サンプルのCSSソースが間違っていたんですが、 実際の制作中のサイトでのCSSソースは、 div#sample a:hover img { filter: alpha(opacity=60); opacity:0.6; -moz-opacity:0.6; } と画像に透明度を設定するよう記述しています。 最初の説明に不足が多くて申し訳ございません。 上位の div#sample には width でサイズを指定しています。
- t_freak
- ベストアンサー率70% (12/17)
filter:alphaはIE専用です。 特定のブラウザでしか使えない機能を使うのはやめましょう。
お礼
早速ご回答いただきありがとうございました。 すみません、肝心なことをひとつ書き忘れていたので 補足に追記します。
補足
すみません、先ほどの質問に補足させてください。 上記のスタイルに加えて、実際はfirefoxでも対応できるように 下記のように記述しています。 #sample { filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; } 「-moz-opacity:0.6;」で firefoxも対応できると思っていたんですが・・・。 ver2では対応していないんでしょうか。
お礼
ご回答ありがとうございます。 すみません・・・! 大手サイトを含む、同様のスタイルを使用している複数のサイトで 同じ現象が見られたので、CSS側の問題で、HTMLは関係ない と勝手に解釈してしまっていました・・・。 ↓適用しているHTMLはこんなかんじです。 ------------------------------------------------------ <div id="sample"> <h3> <a href="/*****.html"> <img src="/images/aaa.jpg" width="***" height="***"> </a> </h3> <p> <a href="***">コメントコメントコメント</a> </p> </div> ------------------------------------------------------ div#sample 以外の部分の文字もこのaaa.jpgにロールオーバーした時に透けてしまうという現象が起きています。 説明不足が多々あって本当に申し訳ありません。 よろしくお願いします。