互換性のある背景色の半透明 CSS コード (内部の子要素には影響しません)

単純な互換性を実現する方法。親要素の背景色は半透明ですが、子要素は影響を受けません。

すべてのブラウザの背景色の半透明CSSコードと互換性があります:

リーリー

注: startColorStr と endColorStr の値、最初の 2 桁は 16 進数の透明度、最後の 6 桁は 16 進数の色です。

その形式は #AARRGGBB です。 AA、RR、GG、BB は 16 進数の正の整数です。値の範囲は 00 ～ FF です。 RR は赤色の値を指定し、GG は緑色の値を指定し、BB は青色の値を指定します。#RRGGBB カラー単位を参照してください。 AAは透明度を指定します。 00は完全に透明です。 FFは完全に不透明です。値の範囲外の値はデフォルト値に戻ります。

2桁の透明度変換方法:x=alpha*255、計算結果xを16進数に変換するだけです。

jsの16進数への変換メソッド: x.toString(16)

例: 上記の 0.25 の透明度を IE の AA 透明度に変換: var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40

デモの例:

リーリー

アイデア: 最新のブラウザーは半透明の背景色を実現するために CSS3 RGBA を使用し、IE は半透明を実現するために グラデーション フィルター フィルター: progid:DXImageTransform.Microsoft.Gradient を使用します。

注: opacity:0.5 属性または IE filter:alpha(opacity=50) 半透明フィルターは使用できません。この半透明属性は子要素も半透明にするためです。