- 締切済み
背景の過
<body> <div class="alpha"> <p>透けたく無い文字</p> </div> </body> div.alphaに対してfilterで透過させ、 bodyの背景色が透けて見えるようにしました。 しかし残念なことに内側の 「透けたく無い文字」がどうにも透けてしまいます。 「透けたく無い文字」をどうしたら透けないようにできますか？
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- idhokanohi
- ベストアンサー率45% (9/20)
たぶんものすごくピンポイントな回答を投下 http://html-time.com/css/alpha100_txt_source.htm ここの解説とおなじですが。 <p style="position:relative;">透けたくない文字</p> でいけるかと思います。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 肝心のスタイル部がないのでどのようにされてるのかが分かりませんが <div>のbackgroundに何も指定しなければbodyの背景色は見れる <div>を透過させてもbodyの背景色を透かすことはできない ことから<div>の背景色を透かしているということでしょうか？ <style type="text/css"><!-- .alpha { width:300px; height:400px; opacity:0.1; background-color:aqua; } #base { position:relative; } #base p { position:absolute; top:0px; left:0px; margin:0px; } --></style> <!--[if IE]> <style type="text/css"> <!-- .alpha { filter:alpha(opacity=10); } --> </style> <![endif]--> <div style="background-color:aqua;">本来の色</div> <div id="base"> <div class="alpha"></div> <p>透けたく無い文字</p> </div> ※1つだけのサンプルなので記述していませんが .alpha , #base , #base p のwidth,heightは同じ値を入れておいたほうがいいかもしれません
補足
アドバイスありがとうございます。 補足説明いたします。 /* スタイル設定 */ body {background: url(./bg.gif) repeat left top;} div.alpha {background: #FFF;filter: alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;} スタイル設定は上記の様になっており、 div.alphaの背景色が半透明になることでbodyの背景画像が透けてみえる様に設定しています。 ただ、この設定だとdiv.alphaの内側にあるpタグも半透明になってしまい、div.alpha内のpタグの半透明化を解除できないものかな？と思い、質問しました。 いただいたサンプルを試した所、ほぼ理想通りの結果だったのですが、 「filter:alphaで透過させたタグの内側で、透過を解除する方法は無い」 という事でよろしいのでしょうか？
お礼
透過設定を行ったタグの内側は、 不透過にはできないみたいですね。
補足
回答ありがとうございます。 結論から言うと、理想の結果は出ませんでした。 サンプルを見ても 「opacity=30」と指定しているのに、 背景が完全に透けてしまっていたり、 背景色のカラーコードが「#fffff;」と5桁だったり、 ソースに少しおかしな所があります。 また、カラーコードを6桁に直すと、 「opacity=30」と指定しているのに、 まったく透けていない状態になります。 動作環境はMac OSX Safariです。