CSS) 투명도 조절하고 싶을때 (rgba, opacity)

CSS에서 투명도를 조절하고 싶을때가 있을 수 있다.

 

방법은 두가지가 있는데 글이 짧으니 끝까지 읽는것을 권장드립니다.

 

먼저 rgba()

.className{
	background-color:rgba(0, 0, 0, 0.8);/*까만색(0,0,0) 80% 불투명도*/
}
.className2{
	background-color:rgba(0, 0, 0, 0.2);/*까만색(0,0,0) 20% 불투명도*/
}

• R 레드 [0~255]
• G 그린 [0~255]
• B 블루 [0~255]
• A(alpha) [0~1]

A값을 조절하여 투명도를 조절할 수 있습니다.

 

HEX 방식인 #RRGGBBAA, #RGBA 도 있으나, IE나 구형 브라우저 지원을 안하니 구형 모바일 기기를 포함하여 사이트를 제공하려면 rgba로 쓰는편이 좋습니다.

 

주의 : IE8 이하에서 지원하지 않는다. (윈도우7 기본 브라우저)

주의 : 매우 낮은버전의 안드로이드 브라우저에서 지원하지 않을수있음

주의 : IE에서는 R,G,B 값에 float(소수)형식을 지원하지 않음 < 예: rgb(1.1, 255, 12.6) >

 

opacity

.className{
	background-color: #000;/* 까만색(0,0,0) */
    opacity:0.8; /* 80% 불투명도 */
}
.className2{
	background-color: #000;/* 까만색(0,0,0) */
    opacity:0.2; /* 20% 불투명도 */
}

opacity 값을 이용해 투명도 조절이 가능하다.

허용되는 값에 범위는 [0~1] 입니다.

 

IE6 부터 지원하므로 이왕이면 rgba()보다는 opacity를 사용하는것을 권장드립니다.(현재는 IE9 이상 지원도 충분하며 IE11 이상 지원도 나쁘지 않다)

다만 주의점 하나를 확인해주세요

주의 : 하위의 모든 노드들이 opacity에 적용받습니다.

부모가 opacity값이 있으면 자식 node들도 투명해지기 때문에 주의해야합니다.