DIV 배경색을 투명하게 설정하는 방법(CSS)

이미지 불투명도는 CSS에서 opacity를 사용하여 설정이 가능합니다(참고). 예를 들어, 다음과 같은 CSS 코드를 사용하여 이미지의 불투명도를 조정할 수 있습니다.

img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}

DIV 배경색을 투명(불투명)하게 조정하려면 다음 코드를 사용할 수 있습니다(Source: stackoverflow).

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

위의 코드는 오래 전에 나온 것 같습니다만, 실제로 적용해보니 예상한대로 잘 작동하네요. 참고로 위의 코드는 CSS3 속성이 아니라고 하네요(참고).

또는, background-color: rgba(255, 0, 0, 0.4); 형식으로 배경색의 투명도를 조정할 수 있습니다.  배경 그림의 투명도는 아래의 코드를 사용합니다.

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);