[CSS] 모든 브라우저에 배경투명도 적용되게 하기

배경을 투명으로 하기 위해서는 Opacity가 아닌 다른 방법을 써야 합니다. Opacity가 적용된 Element는 자신은 물론이거니와 하위 자식 Element와 Contents까지 모두 투명해지기 때문이죠.

배경만 투명하게 하는 방법으로 활용되는 방법은 2가지가 있습니다.

1. 투명 PNG를 생성하고 Background-image Property를 사용하는 방법
2. Element의 배경만 투명하게 하는 Property를 사용하는 방법

<방법1>의 경우에는 아직도 국내에서 30%~50%를 차지하는 IE6 이하 버전에서는 적용되지 않는 방법입니다. 또한 방법 또한 번거롭고 유지보수하기도 쉽지가 않습니다.

여기에서는 <방법2>을 통해서 배경의 투명도를 CSS Property의 설정만으로 적용할 수 있는 방법을 안내해드리고자 합니다.

본론

방법은 간단히 아래와 같은 CSS Rule을 생성하셔서 사용하시면 됩니다..! 이는 RGBa를 지원하는 브라우저에서 모두 적용되며, Firefox 3이상, Safari 2이상, Opera 10이상, Chrome 모든 버전에서 정상 지원합니다.

.background_opacity50 
{
  /* 먼저 배경이 적용되지 않는 브라우저로 접속했을 때 적용될 배경색을 지정합니다. */
  background: red;
  /* Firefox, Safari, Chrome 등의 브라우저에서 지원되는 일반적 속성 지정 */
  background: rgba(255, 0, 0, 0.5);
}

하지만 불행하게도 MS IE는 이 속성을 따르지 않습니다. 현재 최신버전인 IE9도 이 속성을 제대로 지원하지 않습니다. IE의 경우에는 아래와 같이 다른 Filter Property를 사용해야 합니다.

.background_opacity50
{
  /* IE5.5 ~ 7 전용 속성 */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fff0000, endColorstr=#7fff0000);
  /* IE8, IE9 전용 속성*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fff0000, endColorstr=#7fff0000)";
}

MS IE 개발팀은 무슨 생각인지 끝까지 Filter를 버리지 못하고 있고, IE8, IE9에서는 IE7이하에서 지원했던 Filter를 –ms-filter를 통해서 그대로 계승하고 있습니다.

filter:progid:DXImage….. 등등의 프로그래밍 랭귀지 코드를 엄청나게 입력하다 보면 색상을 입력하는 부분이 나타납니다. startColorstr과 endColorstr을 통해서 Gradient 형태로 Color를 지정할 수 있습니다.

엄청나게 긴 코드와 더불어 골 때리는 점은 Opacity를 지정하기 위해서는 16진수 Hex로 입력해야 한다는 것입니다. 예를 들어 50%를 주기 위해서는 10진수 50을 16진수로 변환을 해야 합니다.. 아래와 같은 방법으로 계산을 하셔야 하지만 정신건강을 위해 눈대중으로 하셔도 괜찮습니다.

//50% 투명도에 해당하는 Hex값 얻기 (Javasciprt)
Math.floor(0.5 * 255).toString(16);

참고: Firebug를 쓰신다면 콘솔에서 바로 위 코드를 실행하시면 간단히 값을 얻을 수 있습니다.

결론

드디어, 최종적으로 완성된 코드는 다음과 같습니다.

.transparentoid
{
    /* 기본 배경색 지정-투명도가 모두 적용되지 않았을 때 색상 */
    background: #FF0000; 
    /* RGBa 적용 - Firefox, Chrome, Safari, Opera ... */
    background: rgba(255,255,0,0.5); 
    /* IE에서 Filter적용을 위해 배경을 지움 */
    background: transparent !ie; 
    /* 정상적인 Filter적용을 위해 zoom:1을 적용 */
    zoom:1; 
    /* IE5.5-7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f990000, endColorstr=#7f990000); 
    /* IE8,9 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f990000, endColorstr=#7f990000)";
}