(Polyfill) RGBA

이 팁은 IE때문에 골치아픈 개발자 및 코더, 디자이너에게 바칩니다. 따라서 이 팁은 많이 알려져 있어 이미 아시는 분도 있습니다.

배경은 투명하게, 컨텐츠는 불투명하게 사용하기 위해 쓰는 방법. 바로 RGBA 입니다.

사용 법은 다들 아시리라 믿습니다. background-color:rgba(123,51,124,50);

하지만 IE는 9 이상이 rgba를 지원합니다. 안타깝죠.

하지만 IE는 filter 를 통해 대체를 할 수 있습니다. 바로 그라디언트 기능이죠.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);

시작 부분과 끝 부분의 색깔을 똑같이 하면 RGBA가 완성됩니다.

이제 주의할 점을 말씀드리겠습니다.

필터 그라디언트 색상코드는 RGBA가 아닌 ARGB입니다. 따라서 알파값이 맨 앞에 16진수로 들어가야 합니다.

나머지 RGB야 뭐 알아서 해도 잘될겁니다.

또한 이 필터를 적용할 엘리먼트는 레이아웃을 가져야 합니다.

인라인 요소라면 그냥 먹혀들지 않을겁니다. 하지만 다행히도 이 속성 하나면 해결됩니다.

zoom:1;

이 2가지만 주의하면 RGBA 백그라운드의 크로스 브라우저는 이미 완료된 겁니다.

composite / 2012년 11월 28일 / 미분류 / 0 Comments