호환성 배경색 반투명 ​​CSS 코드(내부 하위 요소에는 영향을 주지 않음)

간단한 호환성을 달성하는 방법. 상위 요소는 반투명 배경색을 가지며 하위 요소는 영향을 받지 않습니다.

모든 브라우저와 호환되는 배경색 반투명 ​​CSS 코드:

background-color: rgba(<span style="color: #800080;">0</span>, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span>, .<span style="color: #800080;">25</span><span style="color: #000000;">);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr</span>=#<span style="color: #800080;">40000000</span>,endColorStr=#<span style="color: #800080;">40000000</span>);

참고: startColorStr 및 endColorStr의 값으로 처음 두 자리는 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

데모 예:

<style type=<span style="color: #800000;">"</span><span style="color: #800000;">text/css</span><span style="color: #800000;">"</span>><span style="color: #000000;">
.menu</span>-nav-<span style="color: #000000;">bg {
    background</span>-color: rgba(<span style="color: #800080;">0</span>, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span>, .<span style="color: #800080;">25</span><span style="color: #000000;">);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr</span>=#<span style="color: #800080;">40000000</span>,endColorStr=#<span style="color: #800080;">40000000</span><span style="color: #000000;">);
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> css hack: rgba background with IE filter alternative: IE9 renders both! </span><span style="color: #008000;">*/</span><span style="color: #000000;">
.menu</span>-nav-<span style="color: #000000;">bg:not([dummy]) {
   filter: progid:DXImageTransform.Microsoft.Gradient(enabled</span>=<span style="color: #800000;">'</span><span style="color: #800000;">false</span><span style="color: #800000;">'</span><span style="color: #000000;">);
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 对于IE9，除了使用 :not([dummy]) hack 外，还可以使用 :root，推荐使用这个
 * :root 选择器已经被现代主流浏览器支持了，除了IE8及以下IE浏览器
 </span><span style="color: #008000;">*/</span><span style="color: #000000;">
:root .menu</span>-nav-<span style="color: #000000;">bg {
   filter: progid:DXImageTransform.Microsoft.Gradient(enabled</span>=<span style="color: #800000;">'</span><span style="color: #800000;">false</span><span style="color: #800000;">'</span><span style="color: #000000;">);
}
</span></style>
<div <span style="color: #0000ff;">class</span>=<span style="color: #800000;">"</span><span style="color: #800000;">menu-nav-bg</span><span style="color: #800000;">"</span>>
    <a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>我的首页</a>
    |
    <a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>我的微博</a>
</div>

아이디어: 최신 브라우저는 반투명 배경색을 얻기 위해 CSS3 RGBA를 사용하고, IE는 그라디언트 필터 필터: progid:DXImageTransform.Microsoft.Gradient 반투명을 사용합니다.

참고: 이 반투명성 때문에 opacity:0.5 속성이나 IE filter:alpha(opacity=50) 반투명 필터를 사용할 수 없습니다. 하위 요소도 반투명하게 만듭니다.