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 가 없어지는것 ..