"背景だけ"を透過させたい時には、background-colorにrgba()で色と不透明度を指定してやるだけでOKです。
･･･最近のブラウザは。
rgba()に対応してないブラウザ、まぁ主にアレですが･･･にもオリジナルな素晴らしい機能filter: alpha()があります。
filter: alpha(opacity=50)とやると要素の不透明度が50％になるというやつです。
0.5じゃなくて50と指定するところもまた強い自己主張を感じますね。昔気質とでも言いましょうか。
しかし、この素敵機能filter: alpha()では、"背景だけ"でなく子要素含め、すべて透過してしまいます。
とても面倒見が良いです。
しかし、今回のように"背景だけ"に透過を適用したい。そんな時は"DirectX FilterのGradient Filter"の出番です。
これを使って背景にグラデーションしないグラデーションを適用してやるのです。
filter: progid:DXImageTransform.Microsoft.Gradient()
progidのコロンの後に空白を入れないように注意！
引数は以下の通り
- Enabled = 0 / 1
1(true)でグラデーション機能の有効化。デフォルトは1。 - GradientType = 0 / 1
グラデーションの方向。0は縦方向。1は横方向。 - StartColorStr = #00000000～#FFFFFFFF
なんかちょっと長いここが今回のポイント！
グラデーションの開始の透明度＋色をaRGB形式で指定します。aは00(透明)～FF(不透明) - EndColorStr = #00000000～#FFFFFFFF
グラデーションの終了の透明度＋色。
// 白の半透明
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
background-color: rgba(255, 255, 255, 0.5);
IEはrgba()の指定を無視するので、これで「背景だけに透過」が適用されます。めでたしめでたし。
