CSS로 배경투명하게 만들기

CSS를 사용해서 특정 요소를 투명하게 할 땐 주로 두 가지 방법을 사용한다. 

첫째가 opacity 속성이고 둘째가 rgba다. 

1. opacity

opacity는 지정한 요소 전체를 투명하게 하는 속성이다.

속성값은 0~1 까지 사용하며, 0에 가까울 수록 투명정도가 더 크다.

ex. opacity:0.3 또는 opacity:.3 - 앞에 소수점 0은 생략가능하다.

※ ie8이하 버전에서는 opacity가 지원되지 않아서 filter 사용하여야 한다. filter:alpha(opacity:'30')

※ opacity 값을 준 영역안은 모두 투명값을 가진다.

2. rgba

rgba는 rgb 형식의 색 표현에 투명도를 표현하는 alpha 값을 추가한 것으로, 마지막에 오는 alpha 값에 의해 투명도가 결정된다.

속성값은 0~1 까지 사용하며, 0에 가까울 수록 투명정도가 더 크다.

ex. background:rgba(240,120,100,0.3) 또는 background:rgba(240,120,100,.3) - 앞에 소수점 0은 생략가능하다.

※ 배경값만 투명값을 줄 수 있다.

※ ie8이하 버전에서는 background:rgba 형식이 지원되지 않는다. 배경이 지정되지 않는 것으로 표현된다.

하지만 ie필터중에 alpha값을 사용할수 있는 그라데이션 filter 를 이용해 같은 형태로 표현할 수 있다.

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

startColorstr 시작할 색과, endColorstr 끝나는 색에 같은 칼러를 입력하면 일반 배경색처럼 표현된다.

여기서 rgb값을 입력할때 앞 두자리에 투명도를 입력할 수 있다.

투명도는 00~ff까지 255단계를 16진수로 표현해서 입력한다. 0.1부터 1.0까지 rgba 값과 매치하는 IE 필터의 alpha 값은 다음과 같다.

rgba alhpa값	0.0	0.1	0.2	0.3	0.4	0.5	0.6	0.7	0.8	0.9	1.0
그라데이션 alpha 값	00	19	33	4C	66	7F	99	B2	CC	E5	FF