opacity 와 rgba (Transparent)

CSS3에는 투명도를 조정하는 두가지 속성이 있습니다. 바로 opacity와 rgba 속성인데, 해당 속성들은 적용시 조금씩 차이를 보이는데 이에 대하여 자세히 알아봅니다.

OPACITY 속성

CSS3에는 opacity 라는 속성을 가지고 있다. 요소의 Transparent(투명화) 정도를 조절하는 속성인데 포토샵등의 그래픽툴을 이용해서 투명도를 조절하는 것과 같은 원리이다.

	IE	Chrome	Firefox	Opera	Safari
opacity	9.0부터 지원	지원	지원	지원	지원

예상했겠지만 IE6~8 버전들은 이를 지원하지 않는다. 대신 filter를 사용해서 이와 비슷하게 꾸밀 수 있다.

.transparent8 {
    zoom: 1; /* ie 5,6,7 bug fix */
    filter: alpha(opacity=80);
    opacity: 0.8;
}

filter 값은 0~100의 값을 가지며 opacity는 0~1 사이의 값을 가진다. 숫자가 높아질수록 원본에 가깝고 숫자가 낮아질수록 투명화 된다.

W3Copacity Documentation

MSDN Alpha Filter

예제

아래의 예제에는 opacity를 이용해서 텍스트와 이미지를 투명화 해봤다.

1 - Angelababy

2 - 안젤라 베이비 프로필

3 - 출생 1989년 2월28일(중국 상해)
신체 168cm.45kg

1번 텍스트 상자는 opacity: 0.8 의 투명도로 텍스트의 가독성에 문제가 없다
2번 텍스트 상자는 opacity 속성이 아닌 rgba 속성을 사용했는데 3번 텍스트 상자와 같은 0.5의 투명도로 가독성에 문제가 없다
3번 텍스트 상자는 opacity: 0.5 의 투명도로 텍스트의 가독성이 좋지 않다

사실, opacity는 부모요소에 적용시키면 자식들에게도 모두 상속되고 자식단에서 해제할 수 없기때문에 배경과 텍스트를 따로 분리할 수가 없는 문제가 생긴다. 편법으로 opacity가 적용된 요소밖에서 텍스트요소를 absolute 포지션을 이용해서 위치 시킬수 있겠지만 구찮은 방법일수 있다. 이때문에 opacity를 0.8 이하로 낮추지 않고 쓰는 경우가 많다.

RGBA 속성

rgb라는 색상정보 값은 많이 들어 봤을텐데 뒤에 a는 alpha값을 부여한 것이다.

	IE	Chrome	Firefox	Opera	Safari
rgba	9.0부터 지원	지원	지원	지원	지원

이것 또한 예상했겠지만 IE6~8은 지원하지 않기 때문에 filter 속성중에 gradient를 사용해야 한다.

modern-browser 적용법

.target {
    background: #ffffff;
    background: rgba(255, 255, 255, 0.5);
}

rgba는 색상정보를 필요로 하는 속성에 직접 그 값을 부여할 수 있기 때문에 분리하여 사용할 수 있다. 이 값은 opacity와 마찬가지로 0~1 의 값을 가진다. rgba를 지원하지 않는 브라우저를 위해 #ffffff와 같이 배경값을 선언해 준다. IE6~8 대비용

<!--[if lte IE 8]>
.target { 
    background: transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF); 
    zoom: 1;
}
<![endif]-->

이 경우 IE 전용 조건부 주석문을 사용하였는데 <head>와 </head> 사이에 위의 코드를 넣어주거나 따로 CSS 파일을 링크 시켜주면 된다.

background: transparent를 적용한 이유는 미리 다른 배경 색상이 설정되어 있을 경우 filter 메서드와 충돌할 가능성이 있기 때문이다
zoom: 1은 이 필터를 적용할 요소는 레이아웃을 가져야 하는데 인라인 요소에는 IE의 특성상 레이아웃을 가지지 않기 때문에 추가해 준다

여기서 중요한 것이 filter 속성의 starColorstr 값과 endColorstr 값인데 기존의 3byte Hex값이 아니라 4byte Hex값이 되었음을 유념해야 한다. 그리고 처음 두글자에 Alpha 값을 지정하는데 rgba가 아닌 argb 형식이다. 16진수의 값을 적용한다.

이도 저도 귀찮은 분은 그냥 포토샵에서 원하는 색상의 opacity 값을 조절하여 요소의 배경으로 채워 넣는 걸 추천한다. 물론 이때도 ie6은 png 파일의 투명도를 인식하지 못하기 때문에 그에 상응하는 코드를 삽입해야 한다.

'웹코딩 > CSS' 카테고리의 다른 글

float 레이아웃 문제 해결 (0)	2013.12.13
전체화면 배경고정 - FullScreenBackground (20)	2013.01.02
웹폰트(@font-face) 온라인 서비스 (1)	2012.12.30
웹폰트(@font-face) 적용법 #2 - Cufon 폰트 (0)	2012.12.30
웹폰트(@font-face) 적용법 (8)	2012.12.29

WEBDIR