※ ChatGPTを利用し、要約された質問です（原文：filter内の画像を透過させない方法）
filter内の画像を透過させない方法
このQ&Aのポイント
filter内に位置する画像を透過させない方法を教えて下さい。
背景画像を上下左右に敷き詰めた場合、文字がが読みにくくなるのでfilterを使用していますが、透過させたくない画像までfilterがかかってしまいます。
Firefoxなど他のブラウザでも画像を透過させない方法はあるのでしょうか？
いつもお世話になっています。
filter内に位置する画像を透過させない方法を教えて下さい。
背景画像を上下左右に敷き詰めた場合、文字がが読みにくくなるのでfilterを使用しています。
しかしながらこの方法ではロゴや写真など透過させたくない画像までfilterがかかってしまいます。
自分でも試行錯誤を繰り返してみました。
filter効果を設定してあるdivを新しいdivで囲んで画像をpositionで指定してみたところ、IEではロゴが透過しませんでしたが、Firefoxではやはり透過されていました。
IEはcssなどの解釈がかなりいい加減と聞いていますので、Firefoxの表示を信用した方がいいように思われます。
Firefoxなど他のブラウザでも画像を透過させない方法はあるのでしょうか？
ご存知の方、いらっしゃいましたら教えて下さい。
参考のため、ソースを下記に貼っておきます。
htmlやcssに関しては本やwebで検索しながら勉強中ですので、根本的な勘違い等あるかもしれません。
HTML部分
<body>
<div id="page">
<h1><img src="image/logo.jpg" width="217" height="43" alt="My Web Site" /></h1>
<div id="contents">
<div id="main">
<p>---本文---</p>
</div><!-- main end -->
</div><!-- contents end -->
</div><!-- page end -->
</body>
css部分
div#page {
width: 720px;
margin-right: auto;
margin-left: auto;
padding: 0;
position: relative;
}
div#page h1 {
position: absolute;
top: 50px;
left: 251px;
}
div#contents {
width: 720px;
margin: 0 auto;
padding: 0;
text-align: left;
background-color: #fff;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
div#main {
width: 680px;
margin: 0 auto;
padding: 100px 20px 0 20px;
}
お礼
教えて頂いたとおり、z-index: 5;を追加したらfilterの上に表示されました。 こういう高さを指定するタグもあったのですね。勉強になりました。 回答ありがとうございました。