背景の過

締切済

質問者：TMEspion
質問日時：2008/04/17 18:30
回答数：2件

<body>
<div class="alpha">
<p>透けたく無い文字</p>
</div>
</body>

div.alphaに対してfilterで透過させ、
bodyの背景色が透けて見えるようにしました。

しかし残念なことに内側の
「透けたく無い文字」がどうにも透けてしまいます。

「透けたく無い文字」をどうしたら透けないようにできますか？

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2

回答者： idhokanohi
回答日時：2008/04/30 20:40

たぶんものすごくピンポイントな回答を投下

http://html-time.com/css/alpha100_txt_source.htm
ここの解説とおなじですが。
<p style="position:relative;">透けたくない文字</p>
でいけるかと思います。

この回答への補足

回答ありがとうございます。
結論から言うと、理想の結果は出ませんでした。

サンプルを見ても
「opacity=30」と指定しているのに、
背景が完全に透けてしまっていたり、
背景色のカラーコードが「#fffff;」と5桁だったり、
ソースに少しおかしな所があります。
また、カラーコードを6桁に直すと、
「opacity=30」と指定しているのに、
まったく透けていない状態になります。

動作環境はMac OSX Safariです。

補足日時：2008/05/01 09:59

通報する

- 0
- 件

通報する

この回答へのお礼

透過設定を行ったタグの内側は、
不透過にはできないみたいですね。

通報する

お礼日時：2008/06/26 09:05

No.1

回答者： leap_day
回答日時：2008/04/18 01:09

こんにちは

肝心のスタイル部がないのでどのようにされてるのかが分かりませんが

<div>のbackgroundに何も指定しなければbodyの背景色は見れる
<div>を透過させてもbodyの背景色を透かすことはできない

ことから<div>の背景色を透かしているということでしょうか？

<style type="text/css"></style>

</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で透過させたタグの内側で、透過を解除する方法は無い」
という事でよろしいのでしょうか？