Compatibility background color translucent CSS code (does not affect inner child elements)

How to achieve simple compatibility. The parent element has a semi-transparent background color, while the child elements are not affected.

Compatible with all browsers background color translucent CSS code:

background-color: rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);

Note: The values ​​of startColorStr and endColorStr, the first two digits are hexadecimal transparency, and the last six digits are hexadecimal color.

The format is #AARRGGBB. AA, RR, GG and BB are hexadecimal positive integers. The value range is 00 - FF. RR specifies the red value, GG specifies the green value, and BB specifies the blue value, see #RRGGBB color units. AA specifies transparency. 00 is completely transparent. FF is completely opaque. Values ​​outside the value range will be restored to the default value.

2-digit transparency conversion method: x=alpha*255, just convert the calculated result x into hexadecimal.

js conversion method to hexadecimal: x.toString(16)

For example: the above 0.25 transparency, converted to IE's AA transparency: var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40

Demo example:

class="menu-nav-bg">
    "#">我的首页
    |
    "#">我的微博

Idea: Modern browsers use CSS3 RGBA to achieve translucent background color, IE uses Gradient filter filter: progid:DXImageTransform.Microsoft.Gradient to achieve translucency.

Note: You cannot use the opacity:0.5 attribute or IE filter:alpha(opacity=50) translucent filter, because this translucent attribute will make child elements also translucent.