[html/css] 투명도(opacity, alpha)의 차이

 

투명도를 조절하는 opacity 와 alpha

 

컨텐츠에 투명도를 적용하고 싶을 때, opacity와 alpha를 이용한다.

투명도는 0부터 1까지의 값을 입력하며, 소수점 단위로 투명도를 조절할 수 있다. (0=투명, 1= 불투명)

 

opacity의 경우 속성명에 쓰이며 적용한 선택자의 border, 컨텐츠 등 모든 내용을 투명하게 만들고,

alpha의 경우 색상에 rgba로 속성값으로 쓰이며 적용한 해당 속성만 투명하게 만든다.

 

/* opacity는 '속성명'이다. */
선택자{opacity: 숫자;}

/* alpha는 '속성값'이다. */
선택자{속성명: rgba(red, green, blue, alpha);}

 

예시로 test01~03을 만들어 적용해 보았다.

<div class="test01"> 아무것도 적용하지 않은 상태 </div>
<div class="test02"> 배경색상에만 alpha 값을 0.5로 적용한 상태 </div>
<div class="test03"> opacity 값을 div에 0.5로 적용한 상태 </div>

/* 아무것도 없는 기본 상태*/
.test01 {
	width: 500px;
	heigth: 200px;
	background-color: blue;
	border: 3px solid red;
	}
/* background-color에 alpha 값으로 0.5를 준 상태 */
    .test02 {
	width: 500px;
	heigth: 200px;
	background-color: rgba(0, 0, 255, 0.5);
	border: 3px solid red;
	}
/* opacity를 0.5 값을 준 상태 */
    .test03 {
	width: 500px;
	heigth: 200px;
	background-color: blue;
	border: 3px solid red;
    opacity: 0.5;
	}

 

결과는 아래와 같이 나왔다.

 

아무것도 적용하지 않은 상태

배경색상에만 alpha 값을 0.5로 적용한 상태

opacity 값을 div에 0.5로 적용한 상태