レイヤーを背景だけ透過させたい

質問

お世話になります。

レイヤーを背景だけ透過させたく、質問させていただきます。

レイヤーを透過させたい場合、よくスタイルシートのfilterが使われると思います。
たとえば
<div style="width:100; height:20; color:#ff0000; background-color:#0000ff; filter:Alpha(opacity=60);">
フィルター適応</div>
のようにすると、レイヤー全体が透過されます。
しかし、今回やりたいのは、背景のみが透過し、文字は透過させたくありません。

1つ考えた方法として、
<div style="width:100px; height:20px; top:0px; left:0px; position:absolute; background-color:#0000ff; filter:Alpha(opacity=60);">
</div>
<div style="width:100px; height:20px; top:0px; left:0px; position:absolute; color:#ff0000;">
フィルター適応
</div>
のように、無理やりレイヤーを2つ重ねて表示できないこともないのですが、もっとスマートな方法はないでしょうか。

ご存知の方がいらっしゃいましたら、ご教授お願いいたします。

回答No.3

nuruhho44 · ベストアンサー

確か過去レスにあったような覚えがあるのですが・・・

レイヤー（position:absolute）を使わなくてもいいのなら、

<div style="width:100px; height:20px; background-color:#00ffff; filter:Alpha(opacity=60);">
<span style="position:relative;">あいうえお</span>
</div>

と言う具合に中身の要素にposition:relativeを指定することで透過を回避できるようです。
但し外側のdivをposition:absoluteにすると効果がなくなるみたいですので、その場合は面倒でもレイヤーを重ねてください。

お礼

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

なるほど、親レイヤーに対して相対的に表示するほうですね。
すばらしい・・・ですが、実は外側のＤＩＶは仕様上絶対位置指定にしなければならないんです。
やはりレイヤーを重ねるしかないようですね。

relativeにつきましては、また別の機会に使わせていただきます。

ありがとうございました。

回答No.2

noname#12252

ところで、透明の背景レイヤー（＋文字レイヤー）と文字レイヤーだけの違いってのはあるのですか？(^^;

お礼

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

実は特に違いはありません。
実際、レイヤーを重ねる方法で、機能を実現してはいます。

レイヤーを分けたくない理由ですが、レイヤーに設定するスタイルのプロパティーは透過度のほかにもサイズ・位置・文字表示位置・文字サイズ・色・フォントサイズがありますので、レイヤーを2つに分けてつぎはぎで設定するのがいやと言うわがままだけです・・・

回答No.1

noname#25358

俺はメッシュ状に穴を開けたＧＩＦ画像を使ってましたが、それじゃ駄目ですか？

お礼

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

ご指摘のGIF画像についてですが、今回レイヤーの背景色をクライアントがRGBで指定するようなページを作成しています。
GIFでは色の指定が難しいので避けたしだいです。