Opacity 속성

투명도를 준다. 정확히는 불투명도. 0~1 사이의 값을 가지며, 값이 작으면 작을수록 투명해진다. 투명도-불투명도를 주는 방법은 두가지가 있는데, 첫번째는 opacity, 두번째는 RGBA이다.

Opacity option

전체에 불투명도를 준다.

코드

<div>
    <img class="op1" src="jungjin.jpg">
    <img class="op06" src="jungjin.jpg">
    <img class="op02" src="jungjin.jpg">
</div>

.op1 { opacity : 1; }
.op06 { opacity : 0.6; }
.op02 { opacity : 0.2; }

결과

RGBA (Red, Green, Blue, Alpha)

배경색이나 글자에 색을 주려고 할 때, 투명도를 포함한 배경을 줄 수 있다. 사용법은 color를 받는 부분(color, background-color 등)에 다음과 같이 적어준다. rgba(0~255, 0~255, 0~255, 0~1)

<div>
  <h1>CSS 3</h1>
</div>

div {
  background-image : url(great-time.jpg);
}

h1 {
  background-color : rgba(255,255,255,0.5);
}

h1 의 배경이 투명하게 적용된 것이 보인다.