rgba()とfilterで背景だけを透過させる。

"背景だけ"を透過させたい時には、background-colorにrgba()で色と不透明度を指定してやるだけでOKです。 ･･･最近のブラウザは。 rgba()に対応してないブラウザ、まぁ主にアレですが･･･にもオリジナルな素晴らしい機能filter: alpha()があります。 filter: alpha(opacity=50)とやると要素の不透明度が50％になるというやつです。 0.5じゃなくて50と指定するところもまた強い自己主張を感じますね。昔気質とでも言いましょうか。 しかし、この素敵機能filter: alpha()では、"背景だけ"でなく子要素含め、すべて透過してしまいます。 とても面倒見が良いです。 しかし、今回のように"背景だけ"に透過を適用したい。そんな時は"DirectX FilterのGradient Filter"の出番です。 これを使って背景にグラデーションしないグラデーションを適用してやるのです。

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);