Firefox2で画像を透過すると文字も透過してしまう？

締切済

質問者：maru395yu
質問日時：2009/03/24 18:53
回答数：4件

現在制作中のサイトで、
バナー画像に下記のようなスタイルを指定したところ、
クライアントより「Firefox2で見ると画像のみでなくページ全体の文字も透けて見える」と言われました。

#sample {
filter:alpha(opacity=60);
opacity:0.6;
}

一般的によく使われているスタイルのようなので大丈夫だと思っていたんですが、
確認してみると確かにそのような現象になるようです。

同様の現象や解決法をご存じの方、いらっしゃいますでしょうか。
それともこれはブラウザのバグだとあきらめるしかないのでしょうか・・・。

ちなみに、下記ページの「キャンペーン＆スペシャルコンテンツ」の
バナー部分に使用してあるものと同じです。
http://www.lorealparisjapan.jp/main.html

何かご存じの方いらっしゃいましたら、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： abril
回答日時：2009/03/25 10:40

参照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-transitio …
<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共に透過の効果が得られます。

もしかして、すごく単純な問題なのかも…？どこかでリンクが閉じ忘れていたりしていませんか？記述ミスがないか文法チェッカーにはかけてみましたでしょうか？

検証条件が異なる様でしたら、補足して下さい。

- 0
- 件

通報する

No.3

回答者： noname#100277
回答日時：2009/03/24 23:05

CSSだけでは無くHTMLにどう適応させてるのかが不明。

提示しないと根本的な回答は得られないのでは？

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

すみません・・・!
大手サイトを含む、同様のスタイルを使用している複数のサイトで
同じ現象が見られたので、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にロールオーバーした時に透けてしまうという現象が起きています。

説明不足が多々あって本当に申し訳ありません。
よろしくお願いします。

通報する

お礼日時：2009/03/24 23:22

No.2

回答者： OKwebb
回答日時：2009/03/24 21:30

> ちなみに、下記ページの「キャンペーン＆スペシャルコンテンツ」の

> バナー部分に使用してあるものと同じです。
> http://www.lorealparisjapan.jp/main.html

このサイトもページ全体の文字も透けて見えるのでしょうか？
（FireFox3ですがどこの部分かよくわからなくて・・・。）
もしこのサイトで問題ないのであれば、これと同様に上位のタグでサイズ指定してあげればよいのではないでしょうか？

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

上記サイトでも同様に文字が透けて見えます。
全く同じ現象なので、原因も同じだと思うんですが・・・。
Firefox3だと正常に動作しています。

あと、これも説明が足りなかった、というか
サンプルのCSSソースが間違っていたんですが、
実際の制作中のサイトでのCSSソースは、

div#sample a:hover img {
filter: alpha(opacity=60);
opacity:0.6;
-moz-opacity:0.6;
}

と画像に透明度を設定するよう記述しています。
最初の説明に不足が多くて申し訳ございません。

上位の　div#sample　には width でサイズを指定しています。

通報する

お礼日時：2009/03/24 21:45

No.1

回答者： t_freak
回答日時：2009/03/24 19:35

filter:alphaはIE専用です。

特定のブラウザでしか使えない機能を使うのはやめましょう。

参考URL：http://www.htmq.com/style/filter.shtml

この回答への補足

すみません、先ほどの質問に補足させてください。

上記のスタイルに加えて、実際はfirefoxでも対応できるように
下記のように記述しています。

#sample {
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}

「-moz-opacity:0.6;」で
firefoxも対応できると思っていたんですが・・・。
ver2では対応していないんでしょうか。

補足日時：2009/03/24 19:58

通報する