opacity와 rgba

다음 html 코드가 있습니다.

<body>
  <div>바나나, 파이애플, 망고</div>
</body>

body 태그에 배경 이미지를 설정했습니다.

body {
  background: url(http://www.3rabbitz.com/resource/image/theme/preview.jpg) no-repeat;
  margin: 100px 0 0 100px;
}

위에서 설정한 배경 그림(에스프레소, 플리커 (C) Demino)입니다.

그리고 div 태그에 다음 CSS 코드를 적용하면

div {
  background-color: rgb(0, 0, 255);
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  width: 200px;
}

결과는 다음과 같습니다.

opacity 속성으로 div 태그를 투명하게 만들 수 있습니다. opacity 속성에 0과 1 사이의 값을 설정할 수 있는데 0은 완전 투명, 1은 완전 불투명을 의미합니다.

opacity 속성을 0으로 하면

div {
  background-color: rgb(0, 0, 255);
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: bold;
  opacity: 0;
  padding: 20px;
  text-align: center;
  width: 200px;
}

결과는 다음과 같습니다.

opacity 속성을 1으로 하면

div {
  background-color: rgb(0, 0, 255);
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
  padding: 20px;
  text-align: center;
  width: 200px;
}

결과는 다음과 같습니다.

opacity 속성을 1로 설정한 것과 opacity 속성을 설정하지 않은 것의 결과는 같습니다.

opacity 속성을 0.3으로 하면

div {
  background-color: rgb(0, 0, 255);
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: bold;
  opacity: 0.3;
  padding: 20px;
  text-align: center;
  width: 200px;
}

결과는 다음과 같습니다.

그런데 opacity 속성에는 한 가지 문제가 있습니다. 내용을 포함한 div 태그 전체가 투명해지기 때문에 글자까지 흐려집니다.

색상을 설정할 때 사용하는 rgb 대신에 rgba를 사용하면 이 문제를 해결할 수 있습니다. 다음과 같이 opacity 속성은 삭제하고 background-color 속성에 rgba로 투명도를 설정하면

div {
  background-color: rgb(0, 0, 255);
  background-color: rgba(0, 0, 255, 0.3);
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  width: 200px;
}

결과는 다음과 같습니다.

rgba를 사용할 때 다음을 참고하세요.

background-color 뿐만 아니라 색상을 설정할 수 있는 border-color, color, outline-color 등에 사용할 수 있습니다.
rgba를 지원하지 않는 웹 브라우저를 위해서 rgb를 사용한 속성도 설정해야 합니다.

div {
  background-color: rgb(0, 0, 255);
  background-color: rgba(0, 0, 255, 0.3);
  ...
}

정리하면 opacity 속성은 태그 전체를 투명하게 만들고, rgba는 태그의 특정 속성(배경 색, 글자 색, 선 색 등)만을 투명하게 만듭니다.