구버전 IE를 위한 background-color: rgba(); 꼼수

CSS

background-color: rgba(); 는 배경색만 투명도를 설정할 수 있는 아주 좋은 속성이다.
하지만 구형 Internet Explorer에서는 지원하지 않기 때문에 사용하기 위해선 다른 방법을 선택해야 한다.

사이트가 구형 IE를 지원해야 하는 경우 종종 사용하는 방법이다.

<div id="layer">
	레이어
	<div class="rgba"></div>
</div>
#layer {
	position: relative;
	width: 150px;
	height: 150px;
}
#layer .rgba {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	background-color: #000; /* 배경색 지정 */
	opacity: 0.5; /* 투명도 조절 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8을 위한 투명도 설정 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE7을 위한 투명도 설정 */
	
	z-index: -1; /* .bg 보다 뒤로 보내기 */
}

이 방법이 정답은 아니니 늘 다른 방법을 고안해보고 시도해보는게 좋겠다.
물론 제일 좋은건 IE 가 없어지는것 ..

background-colorrgba구버전 IE구형 브라우저아 좀 없어져라
블로그
프로젝트
스터디